@import 'extend-class/global-mat-riple.extend';
$radio-width-height: 16px;

/**
* Primary radio button
**/
mat-radio-button.mat-radio-button {
  .mat-ripple.mat-radio-ripple {
    @extend %mat-ripple;

    .mat-ripple-element.mat-radio-persistent-ripple {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .mat-radio-container {
    height: $radio-width-height;
    width: $radio-width-height;
  }

  .mat-radio-outer-circle {
    border-color: var(--s1-N-50-color);
    border-width: 1px;
    height: $radio-width-height;
    width: $radio-width-height;
  }

  .mat-radio-inner-circle {
    height: $radio-width-height;
    width: $radio-width-height;
  }

  &.mat-accent.mat-radio-checked {
    .mat-radio-inner-circle {
      transform: scale(0.67);
    }

    // hide useless ripple after click
    .cdk-focused .mat-ripple-element {
      display: none;
    }
  }

  &.mat-radio-disabled {
    .mat-radio-outer-circle {
      background: var(--s1-N-15-color);
    }

    &.mat-accent.mat-radio-checked {
      .mat-radio-outer-circle {
        border-color: var(--s1-N-30-color);
      }
    }

    .mat-radio-outer-circle {
      border-color: var(--s1-N-30-color);
    }

    .mat-radio-inner-circle {
      background-color: var(--s1-N-30-color);
    }

    .mat-radio-label-content {
      color: var(--s1-N-40-color);
    }
  }
}