@import '../settings/core';
@import '../settings/dropdown';

@import '../tools/mixins/core';
@import '../tools/mixins/spacing-responsive';

@import 'event-overlay';

.cui-timepicker {
  &-container {
    display: inline-block;
  }

  &_wrapper {
    display: inline-block;
  }

  &__dropdown {
    @include vr-spacing(ph, 0.5, $border: 1px);
    @include vr-spacing(pv, 0.25);
    background: $f-dropdown-bg;
    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
    z-index: 89;
    @include radius($f-dropdown-radius);
    border-color: $gray-4;

    &-container {
      position: relative;
    }

    i.icon,
    input[type=text]  {
      width: 100%;
      text-align: center;
      display: inline-block;
    }

    input[type=text] {
      &:focus {
        border: none;
        padding: 3px;
      }
    }

    .icon {
      font-size: 1.5rem;

      &:hover {
        color: $blue-base;
        cursor: pointer;
      }
    }

    .inline-flex {
      display: inline-flex;
      align-items: center;

      input {
        margin: 0;
      }

      div {
        display: flex;
        flex-flow: column;
        @include vr-spacing(ph, 0.5, $border: 1px);
        & > * {
          width: 3rem;
          display: inline-block;
        }
      }

      &:nth-child(odd) {
        div {
          & > i {
            line-height: vr-adjust(36px);
          }
        }
      }
    }

    .cui-input__messages {
      @include vr-spacing(ph, 0.5);
      @include vr-spacing(pb, 0.5);
    }
  }
}


/**
* @component time-picker
* @section default
* @html
<div class="timePicker-container">
  <div class="cui-timepicker-container">
    <div class="cui-input-group  read-only">
      <input class="cui-input read-only dirty" tabindex="0" type="text" name="cui-timepicker__input-407" readonly="" value="10:17 AM">
    </div>
    <div class="cui-event-overlay cui-event-overlay--bottom">
      <div class="cui-event-overlay__children" style="top: 291px; left: 285px;">
        <div class="cui-timepicker__dropdown-container">
          <div class="cui-timepicker__dropdown">
            <div class="inline-flex">
              <div>
                <i class="icon icon-arrow-up_24" tabindex="-1" role="button"></i>
                <input type="text" minlength="2" maxlength="2" tabindex="0" value="10">
                <i class="icon icon-arrow-down_24" role="button" tabindex="-1"></i>
              </div>:
              <div>
                <i class="icon icon-arrow-up_24" tabindex="-1" role="button"></i>
                <input type="text" minlength="2" maxlength="2" tabindex="0" value="17">
                <i class="icon icon-arrow-down_24" role="button" tabindex="-1"></i>
              </div>
              <div>
                <i class="icon icon-arrow-up_24" tabindex="-1" role="button"></i>
                <input type="text" minlength="2" maxlength="2" tabindex="0" value="AM">
                <i class="icon icon-arrow-down_24" role="button" tabindex="-1"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
*/


/**
* @component time-picker
* @section 24-hour
* @html
<div class="timePicker-container">
  <div class="cui-timepicker-container">
    <div class="cui-input-group  read-only">
      <input class="cui-input read-only dirty" tabindex="0" type="text" name="cui-timepicker__input-408" readonly="" value="14:17">
    </div>
    <div class="cui-event-overlay cui-event-overlay--bottom">
      <div class="cui-event-overlay__children" style="top: 284px; left: 285px;">
        <div class="cui-timepicker__dropdown-container">
          <div class="cui-timepicker__dropdown">
            <div class="inline-flex">
              <div>
                <i class="icon icon-arrow-up_24" tabindex="-1" role="button"></i>
                <input type="text" minlength="2" maxlength="2" tabindex="0" value="14">
                <i class="icon icon-arrow-down_24" role="button" tabindex="-1"></i>
              </div>:
              <div>
                <i class="icon icon-arrow-up_24" tabindex="-1" role="button"></i>
                <input type="text" minlength="2" maxlength="2" tabindex="0" value="17">
                <i class="icon icon-arrow-down_24" role="button" tabindex="-1"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
*/


/**
* @component time-picker
* @section 30-minute-step
* @html
<div class="timePicker-container">
  <div class="cui-timepicker-container">
    <div class="cui-input-group  read-only">
      <input class="cui-input read-only dirty" tabindex="0" type="text" name="cui-timepicker__input-409" readonly="" value="10:47 AM">
    </div>
    <div class="cui-event-overlay cui-event-overlay--bottom">
      <div class="cui-event-overlay__children" style="top: 358px; left: 285px;">
        <div class="cui-timepicker__dropdown-container">
          <div class="cui-timepicker__dropdown">
            <div class="inline-flex">
              <div>
                <i class="icon icon-arrow-up_24" tabindex="-1" role="button"></i>
                <input type="text" minlength="2" maxlength="2" tabindex="0" value="10">
                <i class="icon icon-arrow-down_24" role="button" tabindex="-1"></i>
              </div>:
              <div>
                <i class="icon icon-arrow-up_24" tabindex="-1" role="button"></i>
                <input type="text" minlength="2" maxlength="2" tabindex="0" value="47">
                <i class="icon icon-arrow-down_24" role="button" tabindex="-1"></i>
              </div>
              <div>
                <i class="icon icon-arrow-up_24" tabindex="-1" role="button"></i>
                <input type="text" minlength="2" maxlength="2" tabindex="0" value="AM">
                <i class="icon icon-arrow-down_24" role="button" tabindex="-1"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
*/