.d-time-picker-separator {
  margin: -2px 6px 0 6px;
  @extend .d-text-body-l;
  font-weight: 500;
}

.d-time-picker {
  display: flex;
  align-items: center;

  input {
    border-radius: 4px;
    border: 1px solid var(--d-color-neutral-30);
    background-color: var(--d-color-neutral-00);
    padding: 6px;
    width: 48px;
    height: 32px;
    text-align: center;
    outline: none;
    display: flex;
    @extend .d-text-body-m;

    &::placeholder {
      color: var(--d-color-neutral-30);
    }

    &:focus-visible {
      border-color: var(--d-color-red-20);
      outline: none;
    }

    &:disabled {
      background-color: var(--d-color-neutral-20);
      border-color: var(--d-color-neutral-30);
      color: var(--d-color-neutral-40);
      cursor: not-allowed;
    }
  }

  .input-wrapper {
    display: flex;
    align-items: center;

    &:not(:last-child)::after {
      content: ":";
      @extend .d-time-picker-separator;
    }
  }
}

.d-form-field-error {
  > .d-field-input-wrapper .d-time-picker {
    input {
      background-color: var(--d-color-red-05);
      border-color: var(--d-color-red-70);
    }
  }
}

.d-form-field-success.d-field-show-success {
  > .d-field-input-wrapper .d-time-picker {
    input {
      background-color: var(--d-color-green-05);
      border-color: var(--d-color-green-70);
    }
  }
}