/*
Component represents a checkbox.
Use:
  <label class="top-checkbox">
    Text
    <input type="checkbox"><span></span>
  </label>
*/

$size-md: 16px;
$border-thickness-md: 4px;

$size-lg: 20px;
$border-thickness-lg: 4px;

.top-checkbox {
  display: block;

  position: relative;

  cursor: pointer;
  user-select: none;

  font-size: var(--font-size-3);
  color: var(--color-black-text);

  input {
    height: 0;
    width: 0;

    position: absolute;

    cursor: pointer;

    opacity: 0;
  }

  // Make box active
  input:checked ~ span {
    background: var(--color-primary);
    border-style: solid;
    border-color: var(--color-dark);
  }

  // Span for displaying box (Using element instead of pseudo-element to make input:checked ~ span selector work)
  span {
    position: absolute;
    top: 0;
    left: 0;

    background: var(--color-black-supermuted);
  }

  // Sizes
  &.size-md {
    padding-left: 26px;

    input:checked ~ span {
      border-width: $border-thickness-md;
    }
    span {
      height: calc($size-md + $border-thickness-md);
      width: calc($size-md + $border-thickness-md);
    }
  }
  &.size-lg {
    padding-left: 32px;
    font-size: var(--font-size-4);

    input:checked ~ span {
      border-width: $border-thickness-lg;
    }
    span {
      height: calc($size-lg + $border-thickness-lg);
      width: calc($size-lg + $border-thickness-lg);
    }
  }
}