@import '../../base/components/components.scss';
@import '../../base/mixins';



.enjoy-radio {
    position: relative;
  
    font-size: $radio-label-font-size;
    line-height: $radio-label-height;
  
    display: inline-block;
  
    vertical-align: middle;
  
    box-sizing: border-box;
    height: $radio-label-height;
    margin: 0;
    padding-left: 0;
  
    &.is-upgraded {
      padding-left: $radio-button-size + $radio-padding;
    }
  }
  
  .enjoy-radio__button {
    line-height: $radio-label-height;
  
    .enjoy-radio.is-upgraded & {
      // Hide input element, while still making it respond to focus.
      position: absolute;
      width: 0;
      height: 0;
      margin: 0;
      padding: 0;
      opacity: 0;
      -ms-appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      border: none;
    }
  }
  
  .enjoy-radio__outer-circle {
    position: absolute;
    top: $radio-top-offset;
    left: 0;
  
    display: inline-block;
  
    box-sizing: border-box;
    width: $radio-button-size;
    height: $radio-button-size;
    margin: 0;
  
    cursor: pointer;
  
    border: 2px solid $radio-off-color;
    border-radius: 50%;
  
    z-index: 2;
  
    .enjoy-radio.is-checked & {
      border: 2px solid $radio-color;
    }
  
    fieldset[disabled] .enjoy-radio,
    .enjoy-radio.is-disabled & {
      border: 2px solid $radio-disabled-color;
      cursor: auto;
    }
  }
  
  .enjoy-radio__inner-circle {
    position: absolute;
    z-index: 1;
    margin: 0;
    top: $radio-top-offset + $radio-inner-margin;
    left: $radio-inner-margin;
  
    box-sizing: border-box;
    width: $radio-button-size - ($radio-inner-margin * 2);
    height: $radio-button-size - ($radio-inner-margin * 2);
  
    cursor: pointer;
  
    @include enjoy-animation-default(0.28s);
    transition-property: transform;
    transform: scale(0, 0);
  
    border-radius: 50%;
    background: $radio-color;
  
    .enjoy-radio.is-checked & {
      transform: scale(1, 1);
    }
  
    fieldset[disabled] .enjoy-radio &,
    .enjoy-radio.is-disabled & {
      background: $radio-disabled-color;
      cursor: auto;
    }
  
    .enjoy-radio.is-focused & {
      box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1);
    }
  }
  
  .enjoy-radio__label {
    cursor: pointer;
  
    fieldset[disabled] .enjoy-radio &,
    .enjoy-radio.is-disabled & {
      color: $radio-disabled-color;
      cursor: auto;
    }
  }
  
  .enjoy-radio__ripple-container {
    position: absolute;
    z-index: 2;
    top: -(($radio-ripple-size - $radio-label-height) / 2);
    left: -(($radio-ripple-size - $radio-button-size) / 2);
  
    box-sizing: border-box;
    width: $radio-ripple-size;
    height: $radio-ripple-size;
    border-radius: 50%;
  
    cursor: pointer;
  
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
  
    & .enjoy-ripple {
      background: $radio-color;
    }
  
    fieldset[disabled] .enjoy-radio &,
    .enjoy-radio.is-disabled & {
      cursor: auto;
    }
  
    fieldset[disabled] .enjoy-radio & .enjoy-ripple,
    .enjoy-radio.is-disabled & .enjoy-ripple {
      background: transparent;
    }
  }