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


$md-radio-size: $md-toggle-size !default;
$md-radio-ripple-size: $md-radio-size * 0.75;

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

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

// Container for radio circles and ripple.
.md-radio-container {
  box-sizing: border-box;
  display: inline-block;
  height: $md-radio-size;
  position: relative;
  width: $md-radio-size;
  top: 2px;
}

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

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

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

// Text label next to radio.
.md-radio-label-content {
  display: inline-block;
  order: 0;
  line-height: inherit;
  padding-left: $md-toggle-padding;
  padding-right: 0;

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

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

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

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

.md-radio-ripple {
  position: absolute;
  left: -$md-radio-ripple-size;
  top: -$md-radio-ripple-size;
  right: -$md-radio-ripple-size;
  bottom: -$md-radio-ripple-size;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}