@use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
@use '../core/tokens/token-utils';
@use '../core/style/layout-common';
@use './radio-common';

.mat-mdc-radio-button {
  -webkit-tap-highlight-color: transparent;

  @include radio-common.radio-structure(true);
  @include radio-common.radio-noop-animations();

  @include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) {
    .mdc-radio__background::before {
      @include token-utils.create-token-slot(background-color, ripple-color);
    }

    &.mat-mdc-radio-checked {
      .mat-ripple-element,
      .mdc-radio__background::before {
        @include token-utils.create-token-slot(background-color, checked-ripple-color);
      }
    }

    &.mat-mdc-radio-disabled-interactive .mdc-radio--disabled {
      .mat-ripple-element,
      .mdc-radio__background::before {
        @include token-utils.create-token-slot(background-color, ripple-color);
      }
    }

    .mat-internal-form-field {
      @include token-utils.create-token-slot(color, label-text-color);
      @include token-utils.create-token-slot(font-family, label-text-font);
      @include token-utils.create-token-slot(line-height, label-text-line-height);
      @include token-utils.create-token-slot(font-size, label-text-size);
      @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
      @include token-utils.create-token-slot(font-weight, label-text-weight);
    }

    .mdc-radio--disabled + label {
      @include token-utils.create-token-slot(color, disabled-label-color);
    }
  }

  // This is necessary because we do not depend on MDC's ripple, but have our own that should be
  // positioned correctly. This can be removed once we start using MDC's ripple implementation.
  .mat-radio-ripple {
    @include layout-common.fill;
    pointer-events: none;
    border-radius: 50%;

    .mat-ripple-element {
      opacity: 0.14;
    }

    &::before {
      border-radius: 50%;
    }
  }

  // We don't inherit the border focus style from MDC since we don't use their ripple.
  // Instead we need to replicate it here.
  @include token-utils.use-tokens(tokens-mdc-radio.$prefix, tokens-mdc-radio.get-token-slots()) {
    .mdc-radio .mdc-radio__native-control:focus:enabled:not(:checked) {
      & ~ .mdc-radio__background .mdc-radio__outer-circle {
        @include token-utils.create-token-slot(border-color, unselected-focus-icon-color);
      }
    }
  }


  // For radios render the focus indicator when we know
  // the hidden input is focused (slightly different for each control).
  &.cdk-focused .mat-focus-indicator::before {
    content: '';
  }
}

.mat-mdc-radio-disabled {
  cursor: default;
  pointer-events: none;

  &.mat-mdc-radio-disabled-interactive {
    pointer-events: auto;
  }
}

// Element used to provide a larger tap target for users on touch devices.
.mat-mdc-radio-touch-target {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 48px;
  width: 48px;
  transform: translate(-50%, -50%);

  @include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) {
    @include token-utils.create-token-slot(display, touch-target-display);
  }

  [dir='rtl'] & {
    left: auto;
    right: 50%;
    transform: translate(50%, -50%);
  }
}