// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @summary Initializes radio button
 *
 * @name base
 * @selector .slds-radio
 * @restrict span
 * @support dev-ready
 * @variant
 */
.slds-radio {
  display: inline-block;


  /**
   * Creates a label for radio button
   *
   * @selector .slds-radio__label
   * @restrict .slds-radio label
   */

  /**
   * Creates a custom styled radio button
   *
   * @selector .slds-radio_faux
   * @restrict .slds-radio__label span
   */
  .slds-radio_faux,
  .slds-radio--faux {
    @include square($square-icon-medium-content);
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    border: $border-width-thin solid var(--slds-c-radio-color-border,
      var(--sds-c-radio-color-border, var(--slds-g-color-border-base-4, #{$color-border-input})));
    border-radius: $border-radius-circle;
    background: none;
    background-color: var(--slds-c-radio-color-background, var(--sds-c-radio-color-background, var(--slds-g-color-neutral-base-100, #{$color-background-input})));
    box-shadow: var(--slds-c-radio-shadow, var(--sds-c-radio-shadow));
    transition: border $duration-quickly linear, background-color $duration-quickly linear;
  }

  .slds-form-element__label {
    display: inline;
    vertical-align: middle;
    font-size: $font-size-3;
  }

  [type="radio"] {
    @include square(1px);
    border: 0;
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;

    &:checked + .slds-radio_faux,
    &:checked + .slds-radio--faux,
    &:checked ~ .slds-radio_faux,
    &:checked ~ .slds-radio--faux,
    &:checked + .slds-radio__label .slds-radio_faux,
    &:checked + .slds-radio__label .slds-radio--faux {
      border-color: var(--slds-c-radio-color-border-checked, var(--sds-c-radio-color-border-checked,
        var(--sds-c-radio-color-border, var(--slds-g-color-border-base-4, #{$color-border-input}))));
      background: none;
      background-color: var(--slds-c-radio-color-background-checked, var(--sds-c-radio-color-background-checked, var(--sds-c-radio-color-background, var(--slds-g-color-neutral-base-100, #{$color-background-input}))));

      // Radio Button Selected Mark
      &:after {
        @include square(0.5rem);
        content: '';
        position: absolute;
        top: 50%;
        /* stylelint-disable comment-empty-line-before */
        /*! @noflip */
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        border-radius: $border-radius-circle;
        background: none;
        background-color: var(--slds-c-radio-mark-color-foreground, var(--sds-c-radio-mark-color-foreground, var(--slds-s-mark-color-foreground-checked, $brand-accessible)));
      }
    }

    &:focus + .slds-radio_faux,
    &:focus + .slds-radio--faux,
    &:focus ~ .slds-radio_faux,
    &:focus ~ .slds-radio--faux,
    &:focus + .slds-radio__label .slds-radio_faux,
    &:focus + .slds-radio__label .slds-radio--faux {
      border-color: var(--slds-c-radio-color-border-focus, var(--slds-c-radio-color-border-focus, var(--slds-g-color-border-base-4, #{$color-border-input})));
      box-shadow: var(--slds-c-radio-shadow-focus, var(--sds-c-radio-shadow-focus, var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus})));
      outline: 0;
    }

    &[disabled] {
      // scss-lint:disable NestingDepth
      cursor: not-allowed;
      user-select: none;

      ~ .slds-radio_faux,
      ~ .slds-radio--faux,
      + .slds-radio__label .slds-radio_faux,
      + .slds-radio__label .slds-radio--faux {
        background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});
        border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});

        &:after {
          background: var(--slds-g-color-neutral-base-60, #{$color-gray-8});
        }
      }
    }
  }
}

.slds-has-error .slds-radio [type='radio'] {

  + .slds-radio_faux,
  + .slds-radio--faux,
  ~ .slds-radio_faux,
  ~ .slds-radio--faux,
  + .slds-radio__label .slds-radio_faux,
  + .slds-radio__label .slds-radio--faux {
    border-color: var(--slds-g-color-error-base-40, #{$color-border-error});
    border-width: $border-width-thick;
  }

  &:checked + .slds-radio_faux,
  &:checked + .slds-radio--faux,
  &:checked ~ .slds-radio_faux,
  &:checked ~ .slds-radio--faux,
  &:checked + .slds-radio__label .slds-radio_faux,
  &:checked + .slds-radio__label .slds-radio--faux {
    --slds-c-radio-color-background:
      var(--slds-c-radio-color-background-checked,
      var(--sds-c-radio-color-background-checked,
      var(--sds-c-radio-color-background,
      var(--sds-c-radio-color-background,
      var(--slds-g-color-neutral-base-100, #{$color-background-input})))));
    background: none;

    &:after {
      background: var(--slds-g-color-error-base-40, #{$color-background-error});
    }
  }
}

.slds-form-element .slds-radio [type='radio'] + .slds-radio_faux,
.slds-form-element .slds-radio [type='radio'] + .slds-radio--faux,
.slds-form-element .slds-radio [type='radio'] ~ .slds-radio_faux,
.slds-form-element .slds-radio [type='radio'] ~ .slds-radio--faux,
.slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux,
.slds-radio [type='radio'] + .slds-radio__label .slds-radio--faux {
  margin-right: $spacing-x-small;

  @include rtl() {
    /*! @noflip */
    margin-right: 0;
    /*! @noflip */
    margin-left: $spacing-x-small;
  }
}