@import "../../variables/colors.scss";
@import "../../variables/spacing.scss";

.commonTimeMenu {
  border: 1px solid $gray300;
  border-radius: $borderRadiusBase;
  background-color: $white;
  padding: 8px;
  margin-top: 8px;
  height: 157px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0px 2px 4px $midnightOpaque10;
}
.commonTimeMenuItem { 
  width: 92px;
  padding: 8px 0;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: $gray700;
}
.commonTimeMenuItem:hover, .commonTimeMenuItem:focus {
  background-color: $gray100;
}
.commonTimeMenuItem:active, .commonTimeMenuItem:focus {
  text-decoration: underline;
}

.timeFilterPicker {
  display: flex;
  padding-bottom: 24px;
  border-bottom: 1px dashed $gray200;
  font-variant-numeric: tabular-nums;
}
.timeFilterPickerToText {
  line-height: 40px;
  padding: 0px 16px;
}
.timeFilterPickerDayOfWeekContainer {
  height: 40px;
  display: flex;
  align-items: center;
}

.contextTimeRangeControlBar.timeFilterPicker {
  height: 40px;
  align-items: center;
  padding-bottom: 0;
  border-bottom: none;
}
.contextTimeRangeControlBar.timeFilterPickerDayOfWeekContainer {
  height: 25px;
}

.contextTimeRangeControlBar.commonTimeMenu {
  margin-top: 6px;
  padding: 4px;
  box-sizing: content-box;
}
.contextTimeRangeControlBar.commonTimeMenuItem {
  width: 78px;
  padding: 4px 0;
  font-size: 14px;
}