@import '../../scss/styles.scss';

@layer payload-default {
  .checkbox {
    position: relative;
    margin-bottom: $baseline;

    .tooltip:not([aria-hidden='true']) {
      right: auto;
      position: static;
      transform: translateY(calc(var(--caret-size) * -1));
      margin-bottom: 0.2em;
      max-width: fit-content;
    }
  }

  .checkbox-input {
    display: inline-flex;
    &:hover:not(&--read-only) {
      label,
      input {
        cursor: pointer;
      }
    }

    label.field-label {
      padding-bottom: 0;
      padding-left: base(0.5);
    }

    [dir='rtl'] &__input {
      margin-right: 0;
      margin-left: base(0.5);
    }

    &__input {
      @include formInput;
      display: flex;
      padding: 0;
      line-height: 0;
      position: relative;
      width: $baseline;
      height: $baseline;

      & input[type='checkbox'] {
        position: absolute;
        // Without the extra 4px, there is an uncheckable area due to the border of the parent element
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        padding: 0;
        margin: 0;
        margin-left: -2px;
        margin-top: -2px;
        opacity: 0;
        border-radius: 0;
        z-index: 1;
      }
    }

    &__icon {
      position: absolute;

      svg {
        opacity: 0;
      }
    }

    &:not(&--read-only) {
      &:active,
      &:focus-within,
      &:focus {
        .checkbox-input__input,
        & input[type='checkbox'] {
          outline: 0;
          box-shadow: 0 0 3px 3px var(--theme-success-400) !important;
          border: 1px solid var(--theme-elevation-150);
        }
      }

      &:hover {
        .checkbox-input__input,
        & input[type='checkbox'] {
          border-color: var(--theme-elevation-250);
        }
      }
    }

    &:not(&--read-only):not(&--checked) {
      &:hover {
        cursor: pointer;

        svg {
          opacity: 0.2;
        }
      }
    }

    &--checked {
      .checkbox-input__icon {
        svg {
          opacity: 1;
        }
      }
    }

    .checkbox-input__icon {
      .icon--line {
        width: 1.4rem;
        height: 1.4rem;
      }

      &.partial {
        svg {
          opacity: 1;
        }
      }
    }

    &--read-only {
      .checkbox-input__input {
        @include readOnly;
      }

      label {
        color: var(--theme-elevation-400);
      }
    }
  }

  html[data-theme='light'] {
    .checkbox {
      &.error {
        .checkbox-input__input {
          @include lightInputError;
        }
      }
    }
  }

  html[data-theme='dark'] {
    .checkbox {
      &.error {
        .checkbox-input__input {
          @include darkInputError;
        }
      }
    }
  }
}