.checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: var(--P08);
  cursor: pointer;
  font: var(--Body-Small);
  user-select: none;

  & input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  & .checkbox-custom {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--Checkbox-Dimentions, var(--Checkbox-Dimentions, 16px));
    height: var(--Checkbox-Dimentions, var(--Checkbox-Dimentions, 16px));
    font-size: var(--Size-S10, 10px);
    line-height: 0;
    vertical-align: middle;
    border-radius: var(--Checkbox-Radius, 4px);
    border: var(--Checkbox-Border-Width, 1px) solid var(--Checkbox-Unchecked-Border);
    background-color: var(--Core-White);
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    color: var(--Checkbox-Checked-Icon);
    transition:
      border-color 0.2s ease-in-out,
      background-color 0.2s ease-in-out,
      color 0.2s ease-in-out,
      outline-color 0.2s ease-in-out;

    &::before {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      margin: 0;
      line-height: 1;
      pointer-events: none;
    }

    &.un-icon-check::before {
      -webkit-text-stroke: 0.35px currentcolor;
    }
  }

  /* Disabled */
  &.disabled {
    cursor: not-allowed;

    & .checkbox-custom {
      border-color: var(--Checkbox-Disabled-Border);
      color: var(--Checkbox-Disabled-Icon);
      background-color: var(--Checkbox-Disabled-Background);
      cursor: not-allowed;
    }
  }

  &.error {
    & .checkbox-custom {
      border-color: var(--Checkbox-Unchecked-Error-Border, #CE1821);
    }
  }

  /* Checked / Indeterminate — default */
  & input:is(:checked, :indeterminate) + .checkbox-custom {
    border-color: var(--Checkbox-Checked-Border);
    color: var(--Checkbox-Checked-Icon);
    background-color: var(--Checkbox-Checked-Fill);
  }

  /* Unchecked — focused */
  & input:focus-visible:not(:checked, :indeterminate) + .checkbox-custom {
    border: var(--Checkbox-Border-Width, 1px) solid
      var(--Checkbox-Unchecked-Focused-Border-Default);
    outline: var(--Checkbox-Border-Focus, 2px) solid
      var(--Checkbox-Unchecked-Focused-Border-Focus);
    outline-offset: 1px;
  }

  /* Checked / Indeterminate — focused */
  & input:focus-visible:is(:checked, :indeterminate) + .checkbox-custom {
    border: var(--Checkbox-Border-Width, 1px) solid
      var(--Checkbox-Checked-Focused-Border-Default);
    color: var(--Checkbox-Checked-Focused-Icon);
    background-color: var(--Checkbox-Checked-Focused-Fill);
    outline: var(--Checkbox-Border-Focus, 2px) solid
      var(--Checkbox-Checked-Focused-Border-Focus);
    outline-offset: 1px;
  }

  &:not(.disabled).is-focused
    input:not(:checked, :indeterminate)
    + .checkbox-custom {
    border: var(--Checkbox-Border-Width, 1px) solid
      var(--Checkbox-Unchecked-Focused-Border-Default);
    outline: var(--Checkbox-Border-Focus, 2px) solid
      var(--Checkbox-Unchecked-Focused-Border-Focus);
    outline-offset: 1px;
  }

  &:not(.disabled).is-focused
    input:is(:checked, :indeterminate)
    + .checkbox-custom {
    border: var(--Checkbox-Border-Width, 1px) solid
      var(--Checkbox-Checked-Focused-Border-Default);
    color: var(--Checkbox-Checked-Focused-Icon);
    background-color: var(--Checkbox-Checked-Focused-Fill);
    outline: var(--Checkbox-Border-Focus, 2px) solid
      var(--Checkbox-Checked-Focused-Border-Focus);
    outline-offset: 1px;
  }

  /* Unchecked — hover */
  &:not(.disabled).is-hover
    input:not(:checked, :indeterminate)
    + .checkbox-custom {
    border: var(--Checkbox-Border-Width, 1px) solid
      var(--Checkbox-Unchecked-Hover-Border);
  }

  @media (hover: hover) and (pointer: fine) {
    &:not(.disabled):hover
      input:not(:checked, :indeterminate)
      + .checkbox-custom {
      border: var(--Checkbox-Border-Width, 1px) solid
        var(--Checkbox-Unchecked-Hover-Border);
    }
  }

  /* Unchecked — pressed */
  &:not(.disabled):is(:active, .is-pressed)
    input:not(:checked, :indeterminate)
    + .checkbox-custom {
    border: var(--Checkbox-Border-Width, 1px) solid
      var(--Checkbox-Unchecked-Pressed-Border);
  }

  /* Checked / Indeterminate — hover */
  &:not(.disabled).is-hover
    input:is(:checked, :indeterminate)
    + .checkbox-custom {
    border: var(--Checkbox-Border-Width, 1px) solid
      var(--Checkbox-Checked-Hover-Border);
    color: var(--Checkbox-Checked-Hover-Icon);
    background-color: var(--Checkbox-Checked-Hover-Fill);
  }

  @media (hover: hover) and (pointer: fine) {
    &:not(.disabled):hover
      input:is(:checked, :indeterminate)
      + .checkbox-custom {
      border: var(--Checkbox-Border-Width, 1px) solid
        var(--Checkbox-Checked-Hover-Border);
      color: var(--Checkbox-Checked-Hover-Icon);
      background-color: var(--Checkbox-Checked-Hover-Fill);
    }
  }

  /* Checked / Indeterminate — pressed */
  &:not(.disabled):is(:active, .is-pressed)
    input:is(:checked, :indeterminate)
    + .checkbox-custom {
    border: var(--Checkbox-Border-Width, 1px) solid
      var(--Checkbox-Checked-Pressed-Border);
    color: var(--Checkbox-Checked-Pressed-Icon);
    background-color: var(--Checkbox-Checked-Pressed-Fill);
  }
}

/* Light: checked hover border matches fill */
:not(.theme-dark)
  .checkbox:not(.disabled).is-hover
  input:is(:checked, :indeterminate)
  + .checkbox-custom {
  border: var(--Checkbox-Border-Width, 1px) solid
    var(--Checkbox-Checked-Pressed-Border);
}

@media (hover: hover) and (pointer: fine) {
  :not(.theme-dark)
    .checkbox:not(.disabled):hover
    input:is(:checked, :indeterminate)
    + .checkbox-custom {
    border: var(--Checkbox-Border-Width, 1px) solid
      var(--Checkbox-Checked-Pressed-Border);
  }
}

/* Dark: unchecked hover — light border, transparent center */
.theme-dark
  .checkbox:not(.disabled).is-hover
  input:not(:checked, :indeterminate)
  + .checkbox-custom {
  background-color: transparent;
  border: var(--Checkbox-Border-Width, 1px) solid
    var(--Checkbox-Unchecked-Border);
}

@media (hover: hover) and (pointer: fine) {
  .theme-dark
    .checkbox:not(.disabled):hover
    input:not(:checked, :indeterminate)
    + .checkbox-custom {
    background-color: transparent;
    border: var(--Checkbox-Border-Width, 1px) solid
      var(--Checkbox-Unchecked-Border);
  }
}

.checkbox-block {
  margin: 1rem 0;
}