/*!
 * 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.
 */

.ouiCheckbox {
  position: relative;

  .ouiCheckbox__input {
    @include ouiScreenReaderOnly;

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

    + .ouiCheckbox__square {
      @include ouiCustomControl($type: 'square', $size: $ouiCheckBoxSize);

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

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

    &:indeterminate {
      + .ouiCheckbox__square {
        @include ouiCustomControlSelected($type: 'square');
      }
    }

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

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

      + .ouiCheckbox__square {
        @include ouiCustomControlDisabled;
      }
    }

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

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

    &:focus,
    &:active:not(:disabled) {
      + .ouiCheckbox__square {
        @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.
   */

  &.ouiCheckbox--inList,
  &.ouiCheckbox--noLabel {
    min-height: $ouiCheckBoxSize;
    min-width: $ouiCheckBoxSize;

    .ouiCheckbox__square {
      top: 0;
    }

    .ouiCheckbox__input {
      @include size($ouiCheckBoxSize); /* 1 */

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