@import '../core/style/variables';
@import '../core/ripple/ripple';
@import '../core/style/vendor-prefixes';
@import '../../cdk/a11y/a11y';


$mat-radio-size: $mat-toggle-size !default;
$mat-radio-ripple-radius: 20px;

// Top-level host container.
.mat-radio-button {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}

// Inner label container, wrapping entire element.
// Enables focus by click.
.mat-radio-label {
  // Disable text selection on the label itself, because having text selected
  // will prevent focus from reaching the label. Below we'll re-enable it only
  // for the label's content so that people can still select the text.
  @include user-select(none);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;

  // Have the label span the rest of the radio button for maximum clickable area.
  width: 100%;
}

// Container for radio circles and ripple.
.mat-radio-container {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: $mat-radio-size;
  height: $mat-radio-size;
  // The radio container is inside of a inline-flex element and may shrink if the label
  // is wide and text-wrapping is enabled.
  flex-shrink: 0;
}

// The outer circle for the radio, always present.
.mat-radio-outer-circle {
  box-sizing: border-box;
  height: $mat-radio-size;
  left: 0;
  position: absolute;
  top: 0;
  transition: border-color ease 280ms;
  width: $mat-radio-size;
  border: {
    width: 2px;
    style: solid;
    radius: 50%;
  }

  ._mat-animation-noopable & {
    transition: none;
  }
}

// The inner circle for the radio, shown when checked.
.mat-radio-inner-circle {
  border-radius: 50%;
  box-sizing: border-box;
  height: $mat-radio-size;
  left: 0;
  position: absolute;
  top: 0;
  transition: transform ease 280ms, background-color ease 280ms;
  width: $mat-radio-size;

  // Note: This starts from 0.001 instead of 0, because transitioning from 0 to 0.5 causes
  // IE to flash the entire circle for a couple of frames, throwing off the entire animation.
  transform: scale(0.001);

  ._mat-animation-noopable & {
    transition: none;
  }

  .mat-radio-checked & {
    transform: scale(0.5);

    @include cdk-high-contrast {
      // Since we use a background color to render the circle, it won't be
      // displayed in high contrast mode. Use a border as a fallback.
      border: solid $mat-radio-size / 2;
    }
  }
}

// Text label next to radio.
.mat-radio-label-content {
  // Re-enable text selection for the button's content since
  // we disabled it above in the `.mat-radio-label`.
  @include user-select(auto);
  display: inline-block;
  order: 0;
  line-height: inherit;
  padding-left: $mat-toggle-padding;
  padding-right: 0;

  [dir='rtl'] & {
    padding-right: $mat-toggle-padding;
    padding-left: 0;
  }
}

// Alignment.
.mat-radio-label-content.mat-radio-label-before {
  order: -1;
  padding-left: 0;
  padding-right: $mat-toggle-padding;

  [dir='rtl'] & {
    padding-right: 0;
    padding-left: $mat-toggle-padding;
  }
}

// Basic disabled state.
.mat-radio-disabled,
.mat-radio-disabled .mat-radio-label {
  cursor: default;
}

// Increase specificity because ripple styles are part of the `mat-core` mixin and can
// potentially overwrite the absolute position of the container.
.mat-radio-button .mat-radio-ripple {
  position: absolute;
  left: calc(50% - #{$mat-radio-ripple-radius});
  top: calc(50% - #{$mat-radio-ripple-radius});
  height: $mat-radio-ripple-radius * 2;
  width: $mat-radio-ripple-radius * 2;
  z-index: 1;
  pointer-events: none;

  .mat-ripple-element:not(.mat-radio-persistent-ripple) {
    opacity: 0.16;
  }
}

.mat-radio-persistent-ripple {
  width: 100%;
  height: 100%;
  transform: none;

  .mat-radio-container:hover & {
    opacity: 0.04;
  }

  .mat-radio-button:not(.mat-radio-disabled).cdk-keyboard-focused &,
  .mat-radio-button:not(.mat-radio-disabled).cdk-program-focused & {
    opacity: 0.12;
  }

  // We do this here, rather than having a `:not(.mat-radio-disabled)`
  // above in the `:hover`, because the `:not` will bump the specificity
  // a lot and will cause it to overide the focus styles.
  &, .mat-radio-disabled .mat-radio-container:hover & {
    opacity: 0;
  }

  // Hover styles will be displayed after tapping on touch devices.
  // Disable the hover styling if the user's device doesn't support hovering.
  @media (hover: none) {
    // Note that we only negate the `:hover` rather than setting it to always be `display: none`,
    // in order to maintain the focus indication for hybrid touch + keyboard devices.
    .mat-radio-container:hover & {
      display: none;
    }
  }
}

.mat-radio-input {
  // Move the input in the middle and towards the bottom so
  // the native validation messages are aligned correctly.
  bottom: 0;
  left: 50%;
}

@include cdk-high-contrast {
  .mat-radio-disabled {
    opacity: 0.5;
  }
}