.euiCheckbox {
  position: relative;

  .euiCheckbox__input {
    @include euiScreenReaderOnly;

    ~ .euiCheckbox__label {
      display: inline-block;
      padding-left: ($euiCheckBoxSize * 1.5);
      line-height: $euiSizeL;
      font-size: $euiFontSizeS;
      position: relative;
      z-index: 2;
      cursor: pointer;
    }

    + .euiCheckbox__square {
      @include euiCustomControl($type: 'square', $size: $euiCheckBoxSize);

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

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

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

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

      ~ .euiCheckbox__label {
        color: $euiFormControlDisabledColor;
        cursor: not-allowed !important;
      }

      + .euiCheckbox__square {
        @include euiCustomControlDisabled;
      }
    }

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

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

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

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

  &.euiCheckbox--inList,
  &.euiCheckbox--noLabel {
    min-height: $euiCheckBoxSize;
    min-width: $euiCheckBoxSize;

    .euiCheckbox__square {
      top: 0;
    }

    .euiCheckbox__input {
      @include size($euiCheckBoxSize); /* 1 */

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