.date-range-time-panel {

  position: absolute;
  top: 100%;
  left: 2px;
  width: 245px;

  &--has-presets {
    width: 540px;
  }

  &--date-only {
    .date-range-time-panel__inputs .input-wrap,
    .date-range-time-panel__inputs .input-wrap .date-select {
      width: 216px;
    }
  }

  &--right {
    right: 2px;
    left: auto;
  }
  &--relative {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    .date-range-time-panel__scrim {
      display: none;
    }
  }
  &__error {
    margin-top: rem-calc(-5px);
  }
  &--no-scrim {
    .date-range-time-panel__scrim {
      opacity: 0;
    }
  }

  &__panel {
    position: relative;
    z-index: $content-z-index;
    background: $panel-background-color;
    @include border($panel-border-color);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }
  &__body {
    display: flex;
  }
  &__footer {
    padding: em-calc(20px);
  }
  &__scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: $content-z-index;
  }
  &__presets {
    padding-top: em-calc(13px);
    button {
      padding: em-calc(4px) em-calc(8px);
      margin-bottom: em-calc(4px);
    }
    .active {
      button {
        background: $brand-color;
        color: $white-color;
        font-weight: 500;
      }
      .button--live {
        background: $negative-color;
      }
    }
    .button--live {
      color: $negative-color;
      font-weight: 500;
      position: relative;
      padding-left: em-calc(32px);
      &:before {
        content: '\e923';
        font-family: 'nuvi_icons_bold';
        position: absolute;
        left: 4px;
        top: 3px;
        @include font-size(18px);
      }
    }
  }
  &__inputs {
    font-size: rem-calc(13px);
    padding-top: em-calc(20px);
    width: 260px;
    .input-wrap {
      display: inline-block;
      margin: 0 em-calc(8px) 0 0;
      position: relative;
      &::after {
        font-family: 'nuvi_icons_bold';
        font-size: rem-calc(16px);
        position: absolute;
        color: lighten($light-blue-color, 15);
        pointer-events: none;
        right: 8px;
        top: 23px;
      }
      &--date::after {
        content: '\e905';
      }
      &--time::after {
        content: '\e915';
      }
      .date-select {
        width: em-calc(140px);
        .dropdown__options {
          width: 280px !important;
          max-height: 300px;
          overflow: hidden;
        }
      }
    }
    .label {
      display: block;
      color: #93a0bf;
    }
    input {
      width: em-calc(140px);
    }
    .dropdown {
      width: em-calc(120px);
      &__selected-text--default {
        color: $white-color;
      }
      &__arrow {
        visibility: hidden;
      }
    }
  }
}