@import '../core/style/variables';
@import '../core/ripple/ripple';


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

// Top-level host container.
.mat-radio-button {
  display: inline-block;
}

// Inner label container, wrapping entire element.
// Enables focus by click.
.mat-radio-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;
}

// 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%;
  }
}

// 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-radio-checked & {
    transform: scale(0.5);
  }
}

// Text label next to radio.
.mat-radio-label-content {
  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;
}

.mat-radio-ripple {
  position: absolute;
  left: $mat-radio-size / 2 - $mat-radio-ripple-radius;
  top: $mat-radio-size / 2 - $mat-radio-ripple-radius;
  height: $mat-radio-ripple-radius * 2;
  width: $mat-radio-ripple-radius * 2;
  z-index: 1;
  pointer-events: none;
}