/**
 * Office UI Fabric JS 1.5.0
 * The JavaScript front-end framework for building experiences for Office 365.
 **/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// RadioButton styles

$ms-radiobutton-field-size: 20px;
$ms-radiobutton-transition-duration: 200ms;
$ms-radiobutton-transition-duration-inner: 150ms;
$ms-radiobutton-transition-timing: cubic-bezier(.4, 0, .23, 1);

.ms-RadioButton {
  @include ms-baseFont;
  box-sizing: border-box;
  color: $ms-color-neutralPrimary;
  font-size: $ms-font-size-m;
  font-weight: $ms-font-weight-regular;
  min-height: 36px;
  position: relative;

  .ms-Label {
    font-size: $ms-font-size-m;
    padding: 0 0 0 26px;
    cursor: pointer;
    display: inline-block;
  }
}

// The hidden input
.ms-RadioButton-input {
  position: absolute;
  opacity: 0;
}

// The radio button circle container
.ms-RadioButton-field::before {
  content: '';
  display: inline-block;
  border: 2px solid $ms-color-neutralTertiary;
  width: $ms-radiobutton-field-size;
  height: $ms-radiobutton-field-size;
  cursor: pointer;
  font-weight: normal;
  position: absolute;
  box-sizing: border-box;
  transition-property: border-color;
  transition-duration: $ms-radiobutton-transition-duration;
  transition-timing-function: $ms-radiobutton-transition-timing;
  border-radius: 50%;
}

// The inner circle indicating a checked radio button
.ms-RadioButton-field::after {
  content: '';
  width: 0;
  height: 0;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: 0;
  right: 0;
  transition-property: top, left, width, height;
  transition-duration: $ms-radiobutton-transition-duration-inner;
  transition-timing-function: $ms-radiobutton-transition-timing;
  box-sizing: border-box;

  @media screen and (-ms-high-contrast: active) {
    color: $ms-color-contrastBlackDisabled;
  }

  @media screen and (-ms-high-contrast: black-on-white) {
    color: $ms-color-contrastWhiteDisabled;
  }
}

// The radio button field
.ms-RadioButton-field {
  display: inline-block;
  cursor: pointer;
  margin-top: 8px;
  position: relative;
  outline: 0;
  vertical-align: top;

  &:hover,
  &:focus {
    &::before {
      border-color: $ms-color-neutralSecondaryAlt;
    }

    .ms-Label {
      color: $ms-color-black;
    }
  }

  //== State: A disabled radio button
  //
  &.is-disabled {
    cursor: default;

    &::before {
      background-color: $ms-color-neutralTertiaryAlt;
      border-color: $ms-color-neutralTertiaryAlt;
      color: $ms-color-neutralTertiaryAlt;

      @media screen and (-ms-high-contrast: active) {
        border-color: $ms-color-contrastBlackDisabled;
      }

      @media screen and (-ms-high-contrast: black-on-white) {
        border-color: $ms-color-contrastWhiteDisabled;
      }
    }

    .ms-Label {
      color: $ms-color-neutralTertiary;

      @media screen and (-ms-high-contrast: active) {
        color: $ms-color-contrastBlackDisabled;
      }

      @media screen and (-ms-high-contrast: black-on-white) {
        color: $ms-color-contrastWhiteDisabled;
      }
    }

    &:hover,
    &:focus {
      &::before {
        border-color: $ms-color-neutralTertiaryAlt;
      }
    }
  }

  //== State: A radio button in focus
  //
  &.in-focus {
    &::before {
      border-color: $ms-color-neutralSecondaryAlt;
    }
  }
}


//== State: When the radio button is selected (checked)
//
.ms-RadioButton-field.is-checked {
  &::before {
    border: 2px solid $ms-color-themePrimary;
    background-color: transparent;

    @media screen and (-ms-high-contrast: active) {
      border-color: $ms-color-contrastBlackSelected;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      border-color: $ms-color-contrastWhiteSelected;
    }
  }

  &::after {
    background-color: $ms-color-themePrimary;
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;

    @media screen and (-ms-high-contrast: active) {
      background-color: $ms-color-contrastBlackSelected;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      background-color: $ms-color-contrastWhiteSelected;
    }
  }

  &:hover,
  &:focus {
    &::before {
      border-color: $ms-color-themePrimary;
    }
  }

  //== State: A radio button in focus
  //
  &.in-focus {
    &::before {
      border-color: $ms-color-themePrimary;
    }
  }
}