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

.mat-timepicker-content-layout-title {
  @include utils.create-token-slot(
    color,
    content-layout-title-color,
    utils.create-system-var(on-surface-variant)
  );
  @include utils.create-token-slot(
    font-size,
    content-layout-title-font-size,
    variables.$timepicker-content-title-font-size
  );
  @include utils.create-token-slot(
    font-weight,
    content-layout-title-font-weight,
    utils.create-system-var(title-medium-weight)
  );
}

h6.mat-timepicker-content-layout-title {
  margin-top: 0rem;
  margin-bottom: 1.25rem;
  letter-spacing: 0.05rem;
}

.mat-timepicker-content-layout-values {
  display: flex;
  justify-content: center;
}

.mat-time-period {
  margin-left: 0.75rem;
}

.mat-timepicker-content-layout-horizontal {
  h6.mat-timepicker-content-layout-title {
    margin-bottom: 0;
  }

  .mat-timepicker-content-layout-container {
    display: flex;
    gap: 4rem;
    align-items: center;
  }

  .mat-timepicker-content-layout-values {
    flex-wrap: wrap;
  }

  .mat-time-period {
    margin-top: 0.75rem;
    margin-left: 0;
  }
}

.mat-timepicker-content-layout-hours,
.mat-timepicker-content-layout-minutes {
  width: 6rem;
}

.mat-timepicker-content-layout-separator {
  display: flex;
  justify-content: center;
  align-self: center;
  width: 1.5rem;
  height: 1.75rem;
  font-weight: 500;

  @include utils.create-token-slot(
    font-size,
    content-layout-separator-font-size,
    variables.$inputs-separator-font-size
  );
  @include utils.create-token-slot(
    line-height,
    content-layout-separator-line-height,
    variables.$inputs-separator-line-height
  );
}
