/*
	QuickSelect
    ==========================================================================

	Styles for the jQueryUi quickselect widget.

*/

$tab-border-radius: 2px;
$padding-small-half: $padding-small / 2;
$background-color: #F5F5F5;
$text-color: #737373;

.ui-tabs {
	padding: 0;

	.quickselect-headline-wrapper {
		overflow: auto;

		a {
			border: 1px solid;
			padding: $padding-small-half 2*$padding-small $padding-small-half;
			text-decoration: none;
			display: inline-block;
			float: left;
			@include component-colors($background-color, $text-color);

			&.active {
				// @include component-colors($brand-primary, $text-color-tooltip);
				background: $brand-primary;
				border-color: $brand-primary;
				color: #ffffff;
			}

			&:first-child {
				border-top-left-radius: $tab-border-radius;
				border-bottom-left-radius: $tab-border-radius;
			}

			&:last-child {
				border-top-right-radius: $tab-border-radius;
				border-bottom-right-radius: $tab-border-radius;
			}

			&:not(.active) {
				&:not(:first-child) {
					border-left: 0px;
				}
			}
		}

	}

	.quickselect-content-wrapper {
		padding-top: 2*$padding-large;
		border: 0px;
	}
}