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

.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);

    z-index: 89;
    background: $f-dropdown-bg;
    border: $f-dropdown-border-style $f-dropdown-border-width
      $f-dropdown-border-color;
    border-color: $cui-gray-40;

    @include radius($f-dropdown-radius);

    &-container {
      position: relative;
    }

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

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

    .icon {
      font-size: 1.5rem;

      &:hover {
        color: $cui-theme-50;
        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);

        & > * {
          display: inline-block;
          width: 3rem;
        }
      }

      &: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);
    }
  }
}