@import "variables";
.restabs {
	position: relative;
	.restabs__head {
		@media (max-width: 991px){
			position: relative;
			a {
				display: block;
				padding: 12px 12px 12px 48px;
				text-align: left;
				svg {
					position: absolute; top: 50%; left: 12px;
					display: block; width: 24px; height: 24px;
					margin-top: -12px;
				}
				&:before {
					content: '';
					border: 6px solid transparent;
					position: absolute; top: 50%; right: 12px;
					margin-top: -3px;
				}
				&.btn-default {
					&:before { border-top-color: $color_dark; }
				}
				&.btn-primary {
					&:before { border-top-color: $color_white; }
				}
			}
		}
		@media (min-width: 992px){
			display: none;
		}
	}
	.restabs__body {
		@media (max-width: 991px){
			background: $color_white;
			border: 1px solid $color_gray_10;
			position: absolute; top: 100%; left: 0; right: 0;
			overflow: hidden;
			margin-top: 4px;
			z-index: 777;
			display: none;
			@include border-radius(3px);
			@include box-shadow(0 0 10px $color_gray_20);
			ul {
				margin: 0; padding: 0; list-style: none;
				li {
					& + li {
						border-top: 1px solid $color_gray_10;
					}
					a, h1 {
						position: relative;
						border: none;
						display: block;
						margin: 0;
						padding: 12px 12px 12px 48px;
						font-size: 16px;
						font-weight: normal;
						line-height: normal;
						color: $color_gray_80;
						text-decoration: none;
						svg {
							position: absolute; top: 50%; left: 12px;
							display: block; width: 24px; height: 24px;
							margin-top: -12px;
						}
						&:hover {
							background: $color_gray_05;
						}
					}
					&.active { display: none; }
				}
			}
		}
		@media (min-width: 992px){
			ul {
				border-bottom: 1px solid $color_gray_10;
				margin: 0; padding: 0; list-style: none;
				li {
					display: inline-block;
					a, h1 {
						border: 1px solid transparent;
						position: relative;
						display: block;
						margin-bottom: -1px;
						padding: 6px 12px;
						font-size: 16px;
						line-height: normal;
						font-weight: bold;
						color: $color_gray_80;
						text-decoration: none;
						svg { display: none; }
						&:hover {
							color: $color_blue;
						}
					}
					&.active {
						a, h1 {
							background: $color_white;
							border-top-color: $color_blue;
							border-left-color: $color_gray_10;
							border-right-color: $color_gray_10;
							color: $color_blue;
							&:before {
								content: '';
								background: $color_blue;
								position: absolute; top: -2px; left: -1px; right: -1px;
								height: 2px;
							}
						}
					}
				}
			}
		}
	}
	&.open {
		@media (max-width: 991px){
			.restabs__body {
				display: block;
			}
		}
	}
}