lens/src/renderer/components/checkbox/checkbox.scss

/**
 * Copyright (c) OpenLens Authors. All rights reserved.
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */

@include theme-light {
  .Checkbox {
    --checkbox-color-active: var(--blue);
    --checkbox-bgc-active: none;
  }
}

.Checkbox {
  --checkbox-color: var(--textColorPrimary); // tick color [√]
  --checkbox-color-active: var(--contentColor);
  --checkbox-bgc-active: var(--blue);

  flex-shrink: 0;

  &:hover {
    input:not(:checked):not(:disabled) {
      ~ .tick:after {
        opacity: 1;
      }
    }
  }

  input[type="checkbox"] {
    display: none;

    &:checked {
      ~ .box {
        color: var(--checkbox-color-active);
        background: var(--checkbox-bgc-active);
        border-color: var(--checkbox-bgc-active);

        &:after {
          opacity: 1;
        }
      }
    }

    &:disabled {
      ~ .box {
        color: var(--checkbox-color);
      }

      ~ * {
        opacity: .5;
        pointer-events: none;
      }
    }

    &:not(:disabled) ~ * {
      cursor: pointer;
    }
  }

  .label {
    margin-right: $margin;
  }

  > .box {
    $boxSize: round(1.7 * $unit);

    position: relative;
    width: $boxSize;
    height: $boxSize;
    border-radius: 2px;
    color: var(--checkbox-color);
    border: 2px solid currentColor;
    flex-shrink: 0;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 60%;
      border: 2px solid currentColor;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg);
      opacity: 0;
    }

    + * {
      margin-left: .5em;
    }
  }
}