.time-select {
  .time-range {
    min-width: 120px;
  }

  .auto-refresh {
    left: 1px;

    .ant-select-selector {
      padding-right: 6px;
      padding-left: 6px;

      .ant-select-selection-item {
        padding-right: 10px !important;
        text-align: center;
      }
    }
  }

  .time-range-dropdown {
    background: $color-default;
    border-color: rgba($white, 0.08);
  }

  .ant-picker {
    background: rgba($white, 0.08);
    border: none;

    .ant-picker-input {
      > input {
        color: rgba($white, 0.6);

        &::placeholder {
          color: rgba($white, 0.3);
        }
      }
    }

    .ant-picker-suffix {
      color: rgba($white, 0.4);
    }
  }

  .ant-select {
    .ant-select-dropdown {
      background: $color-default;

      .ant-select-item-option {
        color: rgba($white, 0.9);
        font-weight: 400;
      }

      .ant-select-item-option-selected,
      .ant-select-item-option-active {
        background: rgba($white, 0.08);
        color: $white;
      }
    }
  }

  &.light {
    .manual-refresh {
      color: rgba($color-default, 0.6);

      &:hover {
        color: rgba($color-default, 0.8);
      }
    }
    .time-range,
    .ant-select {
      background: rgba($color-default, 0.06);
      color: $color-default;

      &:hover {
        background: rgba($color-default, 0.1);
      }
    }
  }

  &.dark {
    .manual-refresh {
      color: rgba($white, 0.6);

      &:hover {
        color: rgba($white, 0.8);
      }
    }

    .time-range,
    .ant-select {
      background: rgba($white, 0.06);
      color: rgba($white, 0.9);

      &:hover {
        background: rgba($white, 0.1);
      }
    }
  }
}

.time-range-dropdown {
  height: 320px;
  box-shadow: 0 3px 4px 0 rgba($black, 0.06), 0 3px 8px -7px rgba($black, 0.06), 0 6px 12px 0 rgba($black, 0.12);
}
