@layer atoms {
  /* stylelint-disable no-descending-specificity -- complex component with many state combinations */
  .mobius-checkbox__input {
    appearance: none;
    position: absolute;
    margin: var(--checkbox-margin);
    width: var(--checkbox-width);
    height: var(--checkbox-height);
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    pointer-events: none;
    /* Handle custom icons */
    background-repeat: no-repeat;
    background-position: center;

    &.--is-selected {
      background-color: var(--checkbox-background-color);
      background-image: var(--checkbox-icon);
      background-size: var(--checkbox-icon-size);
      &.--is-invalid {
        background-color: var(--checkbox-background-color-invalid);
      }
      &.--is-disabled {
        background-color: var(--checkbox-background-color-disabled);
      }
    }

    /* Disable browser default since input already provides focus */
    &:focus-visible {
      outline: none;
    }

    /* Disabled */
    &.--is-disabled {
      color: var(--checkbox-label-color-disabled);
      border-color: var(--checkbox-border-color-disabled);
      background-color: var(--checkbox-background-color-disabled);
    }

    /* Invalid */
    .--is-invalid &:not(.--is-disabled) {
      border-color: var(--color-error);
    }
  }

  .mobius-checkbox__label {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    border: var(--checkbox-label-border);
    border-radius: var(--radius-1);
    padding: var(--checkbox-label-padding);
    position: relative;
    user-select: none;
    cursor: pointer;
    background-color: var(--color-background-input);

    /* Disabled */
    &.--is-disabled {
      color: var(--checkbox-label-color-disabled);
      border-color: var(--checkbox-border-color-disabled);
      background-color: var(--checkbox-label-background-color-disabled);
      cursor: not-allowed;

      & .mobius-checkbox__icon {
        color: var(--color-text-light);
      }
    }

    /* Hovered */
    &:hover:not(.--is-disabled):not(&.--is-invalid) {
      border-color: var(--color-primary);
      background-color: var(--color-background-input-active);

      & .mobius-checkbox__input {
        border-color: var(--color-primary);
      }

      & .mobius-checkbox__icon {
        color: var(--color-primary);
      }
    }

    &:has(:focus-visible):not(.--is-disabled) {
      &:not(.--is-invalid) {
        box-shadow: var(--box-shadow-default);
        border-color: var(--color-primary);
        background-color: var(--color-background-input-active);

        & .mobius-checkbox__icon {
          color: var(--color-primary);
        }
      }
    }

    /* Invalid */
    &.--is-invalid:not(.--is-disabled) {
      color: var(--checkbox-label-color-invalid);
      border-color: var(--checkbox-border-color-invalid);

      &:hover,
      &:focus-within {
        background-color: var(--checkbox-label-background-color-invalid);
      }

      & .mobius-checkbox__icon {
        color: var(--checkbox-color-invalid);
      }

      & .mobius-checkbox__input {
        border-color: var(--checkbox-border-color-invalid);
      }
    }
  }

  .mobius-checkbox__icon {
    position: relative;
    color: var(--checkbox-color);
    visibility: var(--checkbox-default-icon-visibility);
  }

  .mobius-checkbox__visible-label {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding-top: var(--checkbox-visible-label-padding-top);
    font-family: var(--font-family);
    line-height: var(--line-height-normal);
    font-size: var(--checkbox-visible-label-font-size);
    margin-left: var(--checkbox-label-gap);
  }
}
