$navbar-height: rem-calc(56);
$primary-color: map-get($foundation-palette, primary);
$navbar-background-color: rgba($white, 1);
$navbar-font-color: $primary-color;

$subnav-height: rem-calc(44);//$navbar-height;
$subnav-background-color: $navbar-background-color;//map-get($foundation-palette, nude);
$subnav-font-color: map-get($foundation-palette, primary);//rgba($black, 0.5);

$footer-background-color: $primary-color;//map-get($foundation-palette, gray);
$footer-header-color: $white;
$footer-font-color: $medium-gray;
$footer-height-small: 6rem;
$footer-height: 4rem;

$chat-width-large: rem-calc(400);
$chat-width-small: rem-calc(350);

@mixin sulo-typography() {
	@each $name, $color in $foundation-palette {
		.text-#{$name} {
			color: $color;
		}
    }
}

body::-webkit-scrollbar {
		width: 5px;
		// background: $black;
}
body::-webkit-scrollbar-track {
		background: $white;
}
body::-webkit-scrollbar-thumb {
		background: map-get($foundation-palette,primary);
}
html, body {

	// font-size: 90%;
	@include breakpoint(medium) {
		font-size: $global-font-size;
	}
}
.breadcrumbs {
	a {
		font-weight: $global-weight-bold;
	}
}
.not-found-code {
			// flex: 0 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			p {
				flex: 0;
				// border: $global-border;
				// padding: $global-padding;
				border-radius: 100px;
				margin-bottom: 0;
				// font-weight: normal;
				color: $dark-gray;
				// border-color: $medium-gray;
			}
			// font-size: rem-calc(24);
		}
#sulo-not-found, #sulo-unauthorized {
	$sulo-color: map-get($foundation-palette, sulo-dark);
	.page-content {
		padding-top: 4rem;
		padding-bottom: 8rem;
		.empty-container {
			padding: $global-padding;
		}
		
	}
	hr {
		margin-top: 6rem;
	}
}

body {
  overflow-x: hidden;
  width: 100%;
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
  @include breakpoint(large) {
    overflow-y: auto;
  }
  &.scroll-disabled {
  	overflow: hidden;
  }
}

p a {
	text-decoration: underline;
}
@include label-hollow;

a.disabled {
	pointer-events: none !important;
}

.switch-container {
	display: flex;
	.switch {
		margin-right: 1rem;
		font-size: 75%;
		// font-weight: $global-weight-normal;
		letter-spacing: 1px;
	}
}

.flex {
	display: flex;
	&.flex-row {
		flex-direction: row;
	}
	&.flex-column {
		flex-direction: column;
	}
}

.menu.share-menu {
	// overflow-x: hidden;
	.share-button {
		padding: 1rem 0.75rem;
		img {
			height: 1.5rem;
			width: 1.5rem;
		}
		.sl-tooltip-text {
			// right: -50%;
			// transform: translateX(-0.75rem);
			margin-top: -0.5rem;
		}
		&.disabled {
			opacity: 0.25;
		}
	}
	:last-child {
		.share-button {
			padding-right:1.5rem;
			.sl-tooltip-text {
				// transform: translateX(-1.5rem);
			}
			@include breakpoint(large) {
				padding-right: 0;
				.sl-tooltip-text {
					// transform: translateX(-0.75rem);
				}
			} 
		}
	}
}
.product-grid {
	> .column {
		padding: 0.5rem;
		@include breakpoint(medium-small down) {
			&:nth-child(2n+1) {
				padding-left: 0;
			}
			&:nth-child(2n) {
				padding-right: 0;
			}
		}
		@include breakpoint(medium only) {
			padding: 0.5rem;
			&:nth-child(3n+1) {
				padding-left: 0;
			}
			&:nth-child(3n+2) {
				padding-right: 0.25rem;
				padding-left: 0.25rem;
			}
			&:nth-child(3n) {
				padding-right: 0;
			}
		}
		@include breakpoint(large) {
			// padding: 1rem;
			// &:nth-child(4n+1) {
			// 	padding-left: 0;
			// }
			// &:nth-child(4n+3) {
			// 	padding-right: 0.5rem;
			// 	padding-left: 0.5rem;
			// }
			// &:nth-child(4n) {
			// 	padding-right: 0;
			// }
		}
	}
}

#the-sulo-app {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.sulo-page {
		flex: 1 0;
		display: flex;
		flex-direction: column;
		.page-container {
			flex: 1 0;
		}
	}
}
    .is-invalid-input {
      // @include form-input-error($background-alpha: 1);
    }

.tabs-title {
	// a {
	// 	font-size: 1rem;
	// 	font-weight: 500;
	// }
	.is-active {
		background: $light-gray;
	}	
}

.padded {
	&.vertical {
		padding-bottom: 1rem;
		padding-top: 1rem;
	}
	&.horizontal {
		padding-left: 1rem;
		padding-right: 2rem;
	}
}
h1 {
	// text-transform: uppercase;
	// font-family: $header-font-family-serif;
}

h3 {
	// text-transform: uppercase;
	// margin-top: 4%;
}

.button {
	font-weight: 500;
}

.reveal-overlay {
	display: block;
	overflow: auto;
	.reveal {
		display: block;
		// top: 2rem;
		margin-bottom: 2rem;
	}
	.reveal.large {
		top: 2rem;
	}
}

.drilldown-submenu-cover-previous {
	min-height: 100%;
}

@mixin sulo-colors {
	@each $name, $color in $foundation-palette {
		&.#{$name} {
			color: $color;
			a {
				color: $color;
			}
		}
    }
}
a {
	@include sulo-colors;
}

.page-container {
	min-height: 100%;
	position: relative;
}

.page-content-container {
	padding-top: $navbar-height;
	// padding-bottom: $footer-height-small + 2rem;
	min-height: 80vh;
	@include breakpoint(medium) {
		// padding-bottom: $footer-height;
	}
	.page-content {
		padding-bottom: 10%;
		position:relative;
	}
}

.copyright {
		// color: $black;
		font-size: 80%;
	}
