//colors
// $color_green_leaf_approx: #4c7607;
// $color_gallery_approx: #ededed;
// $white: #fff;
// $color_cod_gray_approx: #080808;
// $color_wild_sand_approx: whitesmoke;

.tabList {
	border-top: 2px solid $color_green_leaf_approx;
	.tab-menu {
		display: block;
		float: left;
		height: 43px;
		width: auto;
		li {
			display: block;
			float: left;
			height: 43px;
			width: 150px;
			position: relative;
			border-right: 1px solid $color_gallery_approx;
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: background 300ms;
			background: $white;
			a {
				display: block;
				float: left;
				height: 100%;
				width: 100%;
				text-align: center;
				line-height: 43px;
				font-size: 1rem;
				color: $color_cod_gray_approx;
				background: $white;
			}
			&:hover {
				background: $color_wild_sand_approx;
				a {
					text-decoration: none;
				}
			}
			&.current {
				background: $color_green_leaf_approx;
				a {
					background: $color_green_leaf_approx;
					color: $white;
				}
				a::before {
					content: '::';
				}
				a::after {
					content: '::';
				}
			}
			&.current::after {
				opacity: 1;
			}
		}
		li::after {
			content: '';
			position: absolute;
			bottom: -10px;
			left: 50%;
			border-left: 11px solid transparent;
			border-right: 11px solid transparent;
			border-top: 11px solid $color_green_leaf_approx;
			margin-left: -11px;
			opacity: 0;
		}
	}
	&.contract .tab-menu li {
		&.current {
			background: $white;
			a {
				background: $white;
				color: $color_cod_gray_approx;
			}
			a::before {
				content: '';
			}
			a::after {
				content: '';
			}
		}
		&.current::after {
			opacity: 0;
		}
	}
}
