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

$button-icon-size: 3.25rem;

.mat-timepicker-content {
  @include utils.create-token-slot(color, content-text-color, utils.create-system-var(on-surface));
  @include utils.create-token-slot(
    background-color,
    content-background-color,
    utils.create-system-var(surface-container-high)
  );
  @include utils.create-token-slot(
    border-radius,
    content-border-radius,
    utils.create-system-var(corner-large)
  );
}

.mat-timepicker-content-container {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem;
}

.mat-timepicker-content-actions {
  display: flex;
  justify-content: space-between;
  margin-right: -1rem;
  margin-top: 1.5rem;
}

.mat-time-toggle-mode-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $button-icon-size;
  height: $button-icon-size;
  margin-left: -0.75rem;
  margin-bottom: -0.25rem;

  & svg {
    @include utils.create-token-slot(
      fill,
      toggle-mode-button-color,
      utils.create-system-var(on-surface-variant)
    );
  }
}

button.mat-timepicker-close-button {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;

  // Hide the button while the overlay is animating, because it's rendered
  // outside of it and it seems to cause scrollbars in some cases.
  .ng-animating & {
    display: none;
  }
}
