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

$clock-dial-hand-width: 1px;
$clock-dial-hand-dot-size: 0.5rem;

$clock-dial-size: 16rem;
$clock-dial-cell-size: 2rem;

.mat-clock-dial {
  position: relative;
  display: block;
  width: $clock-dial-size;
  height: $clock-dial-size;
  margin: 0 auto;
  border-radius: 50%;

  @include utils.create-token-slot(
    background-color,
    clock-dial-background-color,
    utils.create-system-var(surface-container-highest)
  );

  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    content: '';

    @include utils.create-token-slot(
      background-color,
      clock-dial-center-point-color,
      utils.create-system-var(primary)
    );
  }
}

[mat-mini-fab].mat-clock-dial-cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $clock-dial-cell-size;
  height: $clock-dial-cell-size;
  border-radius: 50%;
  box-shadow: none;

  @include utils.create-token-slot(
    color,
    clock-dial-cell-text-color,
    utils.create-system-var(on-surface)
  );

  &:disabled {
    pointer-events: none;
  }

  &:focus,
  &:hover,
  &:active,
  &:focus:active {
    box-shadow: none;
  }
}

[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active {
  @include utils.create-token-slot(
    background-color,
    clock-dial-cell-active-disabled-color,
    color-mix(in srgb, utils.create-system-var(primary) 40%, transparent)
  );
  @include utils.create-token-slot(
    color,
    clock-dial-cell-active-text-color,
    utils.create-system-var(on-primary)
  );
}

.mat-clock-dial-cell:not(.mat-primary):not(.mat-accent):not(.mat-warn) {
  @include utils.create-token-slot(background, clock-dial-cell-unthemable-color, transparent);
}

.mat-clock-dial-cell.mat-clock-dial-cell-active {
  @include utils.create-token-slot(
    color,
    clock-dial-cell-active-text-color,
    utils.create-system-var(on-primary)
  );
  @include utils.create-token-slot(
    background-color,
    clock-dial-cell-active-background-color,
    utils.create-system-var(primary)
  );
}

.mat-clock-dial-cell.mat-clock-dial-cell-disabled {
  @include utils.create-token-slot(
    color,
    clock-dial-cell-disabled-text-color,
    color-mix(in srgb, utils.create-system-var(on-surface) 40%, transparent)
  );

  .mat-mdc-button-persistent-ripple::before {
    @include utils.create-token-slot(
      background-color,
      clock-dial-cell-disabled-background-color,
      transparent
    );
  }
}

.mat-timepicker-content-touch {
  .mat-clock-dial {
    width: calc(#{$clock-dial-size} * 1.25);
    height: calc(#{$clock-dial-size} * 1.25);
  }

  [mat-mini-fab].mat-clock-dial-cell {
    width: calc(#{$clock-dial-cell-size} * 1.5);
    height: calc(#{$clock-dial-cell-size} * 1.5);
    font-size: 1.125rem;
  }
}

.mat-clock-dial-hand {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  margin: 0 auto;
  transform-origin: bottom;

  &::before {
    position: absolute;
    top: calc(#{$clock-dial-hand-dot-size} / -2);
    left: calc(#{$clock-dial-hand-dot-size} / -2);
    width: calc(#{$clock-dial-hand-dot-size} + #{$clock-dial-hand-width});
    height: calc(#{$clock-dial-hand-dot-size} + #{$clock-dial-hand-width});
    border-radius: 50%;
    content: '';
  }

  &.mat-clock-dial-hand-disabled {
    @include utils.create-token-slot(background-color, clock-dial-hand-disabled-color, transparent);

    &::before {
      @include utils.create-token-slot(
        background-color,
        clock-dial-hand-value-point-disabled-color,
        color-mix(in srgb, utils.create-system-var(primary) 40%, transparent)
      );
    }
  }

  &:not(.mat-clock-dial-hand-disabled) {
    @include utils.create-token-slot(
      background-color,
      clock-dial-hand-color,
      utils.create-system-var(primary)
    );

    &::before {
      @include utils.create-token-slot(
        background-color,
        clock-dial-hand-value-point-color,
        utils.create-system-var(primary)
      );
    }
  }
}

.mat-clock-dial-hand.mat-clock-dial-hand-pointless {
  &::before {
    content: none;
  }
}
