@use '../../themes/utils';
@use '../../themes/variables';

$form-field-padding: 1.5rem;

.mat-time-inputs {
  display: block;

  .mat-timepicker-content-layout-separator {
    margin-top: -$form-field-padding;
  }
}

.mat-time-inputs-field {
  display: block;

  &.mat-form-field-appearance-outline {
    .mat-mdc-form-field-flex {
      margin: 0;
    }

    .mat-mdc-text-field-wrapper {
      top: 0;
      margin: 0;

      @include utils.create-token-slot(
        background-color,
        time-inputs-field-background-color,
        utils.create-system-var(surface-container-highest)
      );
    }

    &:not(.mat-focused) {
      .mdc-notched-outline__leading,
      .mdc-notched-outline__notch,
      .mdc-notched-outline__trailing {
        border-style: none;
      }
    }

    .mat-mdc-form-field-subscript-wrapper {
      margin-top: 0.75rem;
      line-height: 1;
      letter-spacing: 0.05rem;

      .mat-mdc-form-field-hint-wrapper {
        padding-left: 0;
      }
    }

    input.mat-mdc-input-element {
      @include utils.create-token-slot(
        font-size,
        time-inputs-field-font-size,
        variables.$input-font-size
      );
      @include utils.create-token-slot(line-height, time-inputs-field-line-height, 1.25);
    }
  }

  .mat-mdc-form-field-bottom-align::before {
    height: 0;
  }

  .mat-mdc-form-field-infix {
    border-top: none;
    text-align: center;
  }

  input.mat-mdc-input-element {
    margin-top: 0;
    text-align: center;
  }
}
