// -------------------------------------------------------------------
// :: TAB BAR
// -------------------------------------------------------------------

.m-tabbar {
	font-size: 0;

	.m-tabbar__item {
		border-radius: 0;
		border-right: none;

		&:last-child {
			border-right: 1px solid $medium;
			border-top-right-radius: rem(20px);
			border-bottom-right-radius: rem(20px);
		}

		&:first-child {
			border-top-left-radius: rem(20px);
			border-bottom-left-radius: rem(20px);
		}
	}

	@include FLOW-to($desktop) {
		.m-tabbar__item {
			display: none;
		}

		.m-tabbar__first,
		.m-tabbar__last {
			display: inline-block;
		}
	}
}

.m-tabbar__item {
	@include FLOW-button();
	border: 1px solid $medium;

	color: $dark-extra;
	background: transparent;

	&:before {
		background: $light;
		transform-origin: center center;
		border-radius: 0;
	}

	&:after {
		background: $white;
		border-radius: 0;
	}

	&--active {
		&:before {
			opacity: 1;
			width: 100%;
		}
	}
}

span.m-tabbar__item {
	cursor: default;

	&:before {
		background: transparent;
	}
}