@use "sb-element/core/spacing";
@use "sb-element/core/transitioning";
@use "sb-element/core/display";
@use "sb-element/core/border";
/*****************************************************************************
Checkbox / Style
******************************************************************************/

// ROOT
.sb-checkbox {

  label {
    cursor: pointer;
    @include display.flex($justify: flex-start, $gap: s);
  }

  span:empty {
    display: none;
  }

  span {
    @include display.flex();
    height: 100%;
  }

  &__checkbox {
    position: relative;
    @include display.flex();
    height: spacing.get-spacing(m);
    width: spacing.get-spacing(m);
  }

  input {
    height: 100%;
    width: 100%;
    cursor: pointer;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: transparent;
    @include border.border($width: m);
    @include border.radius(2px);
    /* Not removed via appearance */
    @include spacing.margin(0);
    @include transitioning.ease(200ms, background, border);
  }

  .sb-icon {
    position: absolute;
    opacity: 0;
    @include transitioning.ease(200ms, opacity);
    font-size: 100%;
  }

  input:checked ~ .sb-icon {
    opacity: 1;
  }

  &.disabled label {
    cursor: not-allowed;
    input { cursor: not-allowed; }
  }
}