ecabs-timepicker {
  .timeInputWrapper {
    z-index: 1;

    input {
      min-height: 42px;
      width: 100%;
      display: block;
      box-sizing: border-box;
      padding: calc-rem(8) calc-rem(16);
      border-radius: $border-radius-base;
      border: 1px solid var(--color-gray-500);
      color: var(--color-black);
      outline: none;
      transition: all 300ms ease-in-out;

      &::placeholder {
        color: rgba(22, 42, 76, 0.5);
      }

      &:disabled {
        border-bottom-width: 1px;
        background-color: var(--color-white-opacity-05);
      }
    }

    input[type='number']::-webkit-inner-spin-button,
    input[type='number']::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &.disabled {
      .descriptions {
        background: transparent;
      }
    }
  }
}

.form-time-list {
  z-index: 98;

  .list {
    background-color: white;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    box-shadow: $box-shadow-default;
    border-radius: 0 0 4px 4px;
    height: calc-rem(224px);
    overflow: hidden;

    .inner-scroll {
      width: 100%;
      height: 100%;
      overflow: auto;

      .inner {
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: block;

          li {
            display: block;
            padding: 8px 12px;
            font-size: $font-size-md;
            line-height: $base-line-height;
            font-weight: normal;
            color: var(--color-black);
            cursor: pointer;

            &:last-child {
              border-color: transparent;
            }

            &.active {
              color: var(--color-brand-light);
            }

            &.hovered {
              background: var(--color-gray-50);
            }
          }
        }
      }
    }
  }
}