/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiRadio {
  position: relative;

  .ouiRadio__input {
    @include ouiScreenReaderOnly;

    ~ .ouiRadio__label {
      display: inline-block;
      padding-left: ($ouiRadioSize * 1.5);
      line-height: $ouiSizeL;
      font-size: $ouiFontSizeS;
      position: relative;
      z-index: 2;
      cursor: pointer;
    }

    + .ouiRadio__circle {
      @include ouiCustomControl($type: 'round', $size: $ouiRadioSize);

      display: inline-block;
      position: absolute;
      left: 0;
      top: (($ouiSizeL - $ouiRadioSize) / 2) - 1px;
    }

    &:checked {
      + .ouiRadio__circle {
        @include ouiCustomControlSelected($type: 'dot');
      }
    }

    &[disabled] {
      //sass-lint:disable no-important
      cursor: not-allowed !important;

      ~ .ouiRadio__label {
        color: $ouiFormControlDisabledColor;
        cursor: not-allowed !important;
      }

      + .ouiRadio__circle {
        @include ouiCustomControlDisabled;
      }
    }

    &:checked[disabled] {
      + .ouiRadio__circle {
        @include ouiCustomControlDisabled($type: 'dot');
      }
    }

    &:focus,
    &:active:not(:disabled) {
      + .ouiRadio__circle {
        @include ouiCustomControlFocused;
      }
    }
  }

  /**
   * 1. Float above the visual radio and match its dimension, so that when users try to click it
   *    they actually click this input.
   */

  &.ouiRadio--inList,
  &.ouiRadio--noLabel {
    min-height: $ouiRadioSize;
    min-width: $ouiRadioSize;

    .ouiRadio__circle {
      top: 0;
    }

    .ouiRadio__input {
      @include size($ouiRadioSize); /* 1 */

      position: absolute; /* 1 */
      opacity: 0; /* 1 */
      z-index: 1; /* 1 */
      margin: 0; /* 1 */
      left: 0; /* 1 */
      cursor: pointer;
    }
  }
}