@import '~@nativescript/theme/core';
@import '~@nativescript/theme/blue';

//Rewrite theme with my theme colors
$bluePrimary: #255c9e;
$blueDark: #294885;
$blueLight: #3979b5;
$yellowPrimary: #f9b200;
$yellowDark: #f49e00;
$yellowLight: #fcc11e;
$disabled: #7c7e81;
$backgroundBlue: #ecf0f5;

// pestra paleta
$yellow: #ffcc00;
$orange: #ee8027;
$red: #e53434;
$purple: #a0067e;
$magenta: #5e2281;
$blueLightest: #007bc2;
$blueDarkest: #172983;
$green: #89ba17;
$whiteBg: #ecf0f5;

$list-view-divider-color: black;
$selected-list-item: $yellowLight;

// Buttons
.btn {
	font-size: 17;
	color: $orange;
	@at-root .ns-dark & {
		color: $orange;
		background-color: white; // because of dark mode
	}
	padding: 5;
	font-family: 'pantonbold, panton-bold-webfont';
}

.btn-primary {
	background-color: #ffffff;
	border-color: $blueDark;
	border-radius: 10;
	border-width: 3;
	color: $blueDark;
	@at-root .ns-dark & {
		color: $blueDark; // because of dark mode
		background-color: white; // because of dark mode
	}
	font-family: 'pantonbold, panton-bold-webfont';

	&:highlighted {
		background-color: #ffffff;
		@at-root .ns-dark & {
			color: $blueDark; // because of dark mode
			background: white; // because of dark mode
		}
	}
}

.btn-outline {
	border-color: $bluePrimary;
	background: white; // because of dark mode
	border-width: 1;
	color: $blueDark;
	@at-root .ns-dark & {
		color: $blueDark;
		background: white; // because of dark mode
	}

	&:highlighted {
		background-color: #ffffff;
	}
}

.btn[isEnabled='false'] {
	background-color: $disabled;
	border-color: $disabled;
	color: $yellowLight;
}

.btn-rounded-sm {
	border-radius: 8;
}

.btn-rounded-lg {
	border-radius: 20;
}

.body {
	font-size: 15;
	font-family: 'pantonregular, panton-regular-webfont';
}

.h1 {
	margin-top: 30;
	margin-bottom: 20;
	font-size: 36;
	font-weight: bold;
	font-family: 'Panton, panton-bold-webfont';
	color: $blueDark;
	@at-root .ns-dark & {
		color: $blueDark;
	}
}

.h2 {
	margin-top: 20;
	margin-bottom: 10;
	font-size: 30;
	font-weight: bold;
	font-family: 'Panton, panton-bold-webfont';
	color: $blueDark;
	@at-root .ns-dark & {
		color: $blueDark;
	}
}

.h3 {
	margin-top: 20;
	margin-bottom: 15;
	font-size: 24;
	font-weight: bold;
	font-family: 'Panton, panton-bold-webfont';
	color: $blueDark;
	@at-root .ns-dark & {
		color: $blueDark;
	}
}

.h4 {
	margin-top: 10;
	margin-bottom: 7;
	font-size: 18;
	font-weight: bold;
	font-family: 'Panton, panton-bold-webfont';
	color: $blueDark;
	@at-root .ns-dark & {
		color: $blueDark;
	}
}

.h5 {
	font-size: 18;
	font-family: 'Montserat, Montserrat-Regular';
	color: $blueDark;
	@at-root .ns-dark & {
		color: $blueDark;
	}
}

.h6 {
	font-size: 12;
	font-family: 'Montserat, Montserrat-Regular';
	color: $blueLight;
	@at-root .ns-dark & {
		color: $blueLight;
	}
}

.full-w {
	width: 100%;
}

.hr-light-my {
	background-color: #c0c0c0;
	height: 1;
}
.hr-dark-my {
	background-color: $blueDark;
	height: 1;
}

.page-area {
	background-color: white;
	border-radius: 10%;
	padding: 10;
	margin-bottom: 20;
}

.page-area {
	background-color: white;
	border-radius: 10%;
	padding: 10;
	margin-bottom: 20;
}

.btn-navigation {
	margin-top: 10;
	margin-bottom: 10;
}

// .separator {
// 	height: 0.1;
// 	background-color: black;
// 	border-radius: 10%;

// }

.page-content {
	color: $black;
	background: white; // because of dark mode
	font-size: 16;
	font-family: 'Montserat, Montserrat-Regular';

	.no-data {
		font-size: 16;
	}
	.activity-indicator-wrapper {
		ActivityIndicator {
			color: $orange;
			width: 15%;
		}
	}
	.activity-indicator-wrapper {
		ActivityIndicator {
			color: $orange;
			width: 15%;
		}
	}

	.menu-container {
		width: 100%;
		horizontal-align: center;

		.item {
			horizontal-align: center;
			font-size: 16;
			margin: 18 15 24 0;

			&.disabled {
				color: $disabled;
			}

			.fas {
				horizontal-align: center;
				color: $orange;
				font-size: 20;

				&.disabled {
					color: $disabled;
				}
			}
		}
	}
}

.title {
	color: $bluePrimary;
	font-family: 'Montserat';
}

// Font icon class
.far {
	font-family: 'Font Awesome 5 Free, fa-regular-400';
	font-weight: 400;
}

.fab {
	font-family: 'Font Awesome 5 Brands, fa-brands-400';
	font-weight: 400;
}

.fas {
	font-family: 'Font Awesome 5 Free, fa-solid-900';
	font-weight: 900;
}

ActionItem {
	color: #000;
}

Label {
	font-family: 'Panton';
	margin-bottom: 5;
}

ActionBar {
	background-color: #ffffff;
	color: $blueDark;
	border-width: 1;
	border-color: transparent;

	.action-bar-title {
		font-family: 'Panton';
		font-size: 24;
		font-weight: bold;
		color: $blueDark;
	}
}

.segmented-bar {
	selected-background-color: #4d7ea8;
	color: #4d7ea8;
	background-color: #f4faff;
	font-size: 10;
}

TabView {
	selected-tab-text-color: $blueDark;
	tab-text-color: $bluePrimary;
	tab-background-color: $yellowPrimary;
	android-selected-tab-highlight-color: $blueDark;
}

// lists

.list-group {
	margin: 8;

	.list-group-item {
		padding: 0;
		margin: 0;

		.list-group-item-header {
			vertical-align: top;

			.fas,
			.far {
				margin-left: 10;
				font-size: 18;
				font-weight: 100;

				&.arr {
					font-size: 28px;
					vertical-align: top;
					color: $orange;
				}
			}

			.list-group-item-heading {
				font-size: 18;
				color: $bluePrimary;
			}

			.list-group-item-text {
				font-size: 16;
				padding: 4 0;
				margin: 0;
			}

			.list-group-item-link {
				font-size: 16;
				padding: 4 0;
				color: $orange;
				margin: 0;
			}
		}
	}
}

.bottomNavigation {
	border-top-width: 1px;
	border-top-color: $blueDark;
	background: white; // because of dark mode
	padding-bottom: 12;
	padding-top: 8;

	.bottomNavigationItem {
		color: $bluePrimary;
		font-weight: bold;
		font-size: 12;
		text-align: center;
		vertical-align: center;

		&.disabled {
			color: $disabled;
		}

		&.selected {
			color: $yellowPrimary;
		}

		.fas {
			font-size: 24;
			padding: 4;
		}
	}
}

.darkWhiteBg {
	background: white; // because of dark mode
}

.darkBlackColor {
	color: black; // because of dark mode
}

RadDataForm {
	// because of dark mode
	background-color: white;
	color: black;
	@at-root .ns-dark & {
		background-color: white;
		color: black;
	}
}

PropertyEditor {
	// because of dark mode
	background-color: white;
	separator-color: $blueDark;
	color: black;
	@at-root .ns-dark & {
		background-color: white;
		separator-color: $blueDark;
		color: black;
	}
}

DataFormEditorCore {
	// because of dark mode
	color: black;
	border-color: $blueDark;
	font-size: 16;
	@at-root .ns-dark & {
		color: black;
		border-color: $blueDark;
	}
}

DataFormEditorLabel {
	// because of dark mode
	color: black;
	background-color: white;
	padding-left: 16;
	font-size: 14;
	@at-root .ns-dark & {
		background-color: white;
		color: black;
	}
}

.notch-fill {
	background: #ffffff;
	padding-top: 24;
}

.url-label {
	color: $orange;
}
.separator {
	border-bottom-color: $list-view-divider-color;
	border-bottom-width: 0.1;
	padding-bottom: 10;
	margin-bottom: 10;
}

.separated-info-line {
	@extend .separator;
}

.separated-list-group-item {
	@extend .list-group-item;
	@extend .separator;
	margin: 0;
	padding-bottom: 0;
	.header {
		color: $blueDark;
		background-color: $whiteBg;
		font-size: 18;
		text-align: center;
		.nav-icon-btn {
			background-color: $whiteBg;
		}
	}
}
.list-group-item-header > * {
	margin: 5 0 10 0;
}
.list-group-title {
	@extend .h4;
	text-align: center;
}
.sort-search-tags {
	margin: 0 5 0 10;
	Label {
		font-size: 16;
		color: black;
		background-color: #f0f0f0;
		border-radius: 50%;
		padding: 3, 6, 3, 6;
		margin: 5, 0, 5, 0;
	}
}
.blue-dark {
	color: $blueDark;
}

.icon-button {
	padding: 0;
	margin: 0;
	font-size: 30;
	background-color: white;
	color: $blueDark;
}

.icon-button.disabled {
	color: $disabled;
}
.blue-lightest {
	color: $blueLightest;
}
.search-modal-heading {
	@extend .h1;
	font-size: 30;
	margin-top: 40;
	text-align: center;
}
.nav-icon-btn {
	color: $orange;
	font-size: 20;
	padding: 0;
	margin: 0;
	width: 100%;
	background-color: white;
}
.item-action-button {
	background-color: white;
	color: $blueLight;
	padding: 15 25 15 25;
}

.m-0 {
	margin: 0;
}
.p-0 {
	padding: 0;
}
.activity-mt60 {
	margin-top: 60;
}
.list-group-item-name {
	color: $bluePrimary;
	font-size: 17;
}
.item-actions {
	padding: 0, 15, 0, 15;
}
.list-group-fw {
	@extend .list-group;
	margin-left: 0;
	margin-right: 0;
	margin: 0;
	padding: 0;
}

.activity-mt60 {
	margin-top: 60;
}

.grid-link {
	width: 42%;
	min-height: 125;
	height: 125;
	margin: 10;
	.span {
		background-color: transparent;
		font-size: 25;
		color: $blueDark;
		text-align: center;
	}
}

.modal-view-style {
	@extend .page-area, .page-content;
	color: $black;
	.disabled {
		color: $disabled;
	}
	// Label {
	// 	margin-left: 10;
	// }
}
.m-t-10 {
	margin-top: 10;
}
.m-l-10 {
	margin-left: 10;
}

@import 'side-drawer';
