// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Choice fields (radio buttons and checkboxes) styles


// Unselected, radio button (default)
.ms-ChoiceField {
  @include ms-font-m;
  @include ms-u-normalize;
  min-height: 36px;
  position: relative;

  .ms-Label {
    font-size: $ms-font-size-m;
    padding: 0 0 0 26px;
  }
}

//== State: Disabled choicefield
.ms-ChoiceField-input:disabled {
  + .ms-ChoiceField-field {
    pointer-events: none;
    cursor: default;

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

    &:after {
      border-color: $ms-color-neutralLight;
    }

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

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

      &:after {
        border-color: $ms-color-contrastBlackDisabled;
      }

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

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

      &:after {
        border-color: $ms-color-contrastWhiteDisabled;
      }

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

// The original unstyled input element
.ms-ChoiceField-input { 
  position: absolute;
  opacity: 0;
  top: 8px;

  &:focus:not(:disabled) {
    + .ms-ChoiceField-field:after {
      border-color: $ms-color-neutralSecondaryAlt;
    }
  }
}

// The choicefield radio button or checkbox
.ms-ChoiceField-field {
  display: inline-block;
  cursor: pointer;
  margin-top: 8px;
  position: relative;

  // The actual styled choicefield element - radio button by default
  &:after {
    content: '';
    display: inline-block;
    border: 1px $ms-color-neutralTertiaryAlt solid;
    width: 19px;
    height: 19px;
    cursor: pointer;
    position: relative;
    font-weight: normal;
    left: -1px;
    top: -1px;
    border-radius: 50%;
    position: absolute;
  }

  &:hover {
    &:after {
      border-color: $ms-color-neutralSecondaryAlt;
    }

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

// A selected radio button
.ms-ChoiceField-input:checked {
  + .ms-ChoiceField-field {
    // Circle indicating a checked radio button
    &:before {
      background-color: $ms-color-neutralSecondary;
      border-color: $ms-color-neutralSecondary;
      color: $ms-color-neutralSecondary;
      border-radius: 50%;
      content: '\00a0';
      display: inline-block;
      position: absolute;
      top: 4px;
      bottom: 0;
      left: 4px;
      width: 11px;
      height: 11px;
      box-sizing: border-box;

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

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

    &:hover:before {
      background-color: $ms-color-neutralDark;
      color: $ms-color-neutralDark;
    }
  }
}

// Checkbox
.ms-ChoiceField-input[type="checkbox"] {
  + .ms-ChoiceField-field:after {
    border-radius: 0;
  }
}

// A selected checkbox 
.ms-ChoiceField-input[type="checkbox"]:checked {
  + .ms-ChoiceField-field {
    &:before {
      @include ms-Icon;
      content: '\e041';
      background-color: transparent;
      border-radius: 0;
      font-size: $ms-font-size-s-plus;
      top: 3px;
      left: 3px;

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

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


//== Component: Choicefield group
//
// Choice field groups contain multiple radio buttons or checkboxes
.ms-ChoiceFieldGroup {
  margin-bottom: 4px;
}