/* ==========================================================================
$BASE-TIME-PICKER ========================================================================== */
/**
* The list of times. */
.picker__list {
list-style: none; padding: 0.75em 0 4.2em; margin: 0;
} /**
* The times on the clock. */
.picker__list-item {
border-bottom: 1px solid #dddddd; border-top: 1px solid #dddddd; margin-bottom: -1px; position: relative; background: #ffffff; padding: .75em 1.25em;
} @media (min-height: 46.75em) {
.picker__list-item { padding: .5em 1em; }
} /* Hovered time */ .picker__list-item:hover {
cursor: pointer; color: #000000; background: #b1dcfb; border-color: #0089ec; z-index: 10;
} /* Highlighted and hovered/focused time */ .picker__list-item–highlighted {
border-color: #0089ec; z-index: 10;
} .picker__list-item–highlighted:hover, .picker–focused .picker__list-item–highlighted {
cursor: pointer; color: #000000; background: #b1dcfb;
} /* Selected and hovered/focused time */ .picker__list-item–selected, .picker__list-item–selected:hover, .picker–focused .picker__list-item–selected {
background: #0089ec; color: #ffffff; z-index: 10;
} /* Disabled time */ .picker__list-item–disabled, .picker__list-item–disabled:hover, .picker–focused .picker__list-item–disabled {
background: #f5f5f5; border-color: #f5f5f5; color: #dddddd; cursor: default; border-color: #dddddd; z-index: auto;
} /**
* The clear button */
.picker–time .picker__button–clear {
display: block; width: 80%; margin: 1em auto 0; padding: 1em 1.25em; background: none; border: 0; font-weight: 500; font-size: .67em; text-align: center; text-transform: uppercase; color: #666;
} .picker–time .picker__button–clear:hover, .picker–time .picker__button–clear:focus {
color: #000000; background: #b1dcfb; background: #ee2200; border-color: #ee2200; cursor: pointer; color: #ffffff; outline: none;
} .picker–time .picker__button–clear:before {
top: -0.25em; color: #666; font-size: 1.25em; font-weight: bold;
} .picker–time .picker__button–clear:hover:before, .picker–time .picker__button–clear:focus:before {
color: #ffffff;
}
/* ==========================================================================
$DEFAULT-TIME-PICKER ========================================================================== */
/**
* The frame the bounds the time picker. */
.picker–time .picker__frame {
min-width: 256px; max-width: 320px;
} /**
* The picker box. */
.picker–time .picker__box {
font-size: 1em; background: #f2f2f2; padding: 0;
} @media (min-height: 40.125em) {
.picker--time .picker__box { margin-bottom: 5em; }
}