/* Check Boxes */

.check-box {
  StBoxLayout { spacing: .8em; }

  StBin {
    border-radius: 7px;
    padding: 2px;
  }

  &:focus StBin {
    // Trick due to St limitations. It needs a background to draw a box-shadow
    background-color: rgba(0, 0, 0, 0.01);
    box-shadow: inset 0 0 0 2px st-transparentize({{accent_color}}, .65);
  }

  StIcon {
    icon-size: 14px;
    padding: 1px;

    color: transparent;
    border-radius: 6px;
    border: 2px solid transparentize(if($variant == 'light', black, white), .85);
  }

  &:hover StIcon {
    border-color: transparentize(if($variant == 'light', black, white), .8);
  }

  &:active StIcon {
    border-color: transparentize(if($variant == 'light', black, white), .7);
  }

  &:checked StIcon {
    background-color: {{accent_color}};
    color: -st-accent-fg-color;
    border-color: transparent;
  }

  &:checked:hover StIcon {
    background-color: st-lighten({{accent_color}}, 5%);
    color: st-lighten(-st-accent-fg-color, 5%);
  }

  &:checked:active StIcon {
    background-color: st-darken({{accent_color}}, 7%);
    color: st-darken(-st-accent-fg-color, 7%);
  }
}