// COMPONENT : Full-width bars

.bar {
	border-bottom: 1px solid $bar-border-color;

	@include max-screen-size(medium) {
		*:last-child {
			margin-bottom: 0;
		}
	}

	@include min-screen-size(medium) {
		* {
			margin: {
				top: 0;
				bottom: 0;
			}
		}
	}

	&.tab {

		padding: .382em 0;

		.width-constraint {
			@extend %flexbox;
		}

		> *:not(.width-constraint),
		.width-constraint > * {
			// For IE10
			display: block;

			@include flex(0, 1, auto);

			padding: 0 $ui-gutter-mobile;

			color: $text-color;
			text-decoration: none;

			@extend %disable-text-selection;

			&:hover {
				background: $tab-hover-bg-color;
				box-shadow: inset 0 -.236em 0 0 $active-tab-color;
			}

			&.selected {
				color: $active-tab-color;
				box-shadow: inset 0 -.236em 0 0 $active-tab-color;

				@extend %disable-pointer-events;

				&:hover {
					background: transparent;
				}

			}
		}
	}

}