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

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

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

.top-togglebox {
  margin-bottom: var(--unit-3);

  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:
      url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='8' transform='translate(1 1)' fill='%2326DE70'/%3E%3Crect x='3' width='4' height='1' fill='%2326DE70'/%3E%3Crect y='7' width='4' height='1' transform='rotate(-90 0 7)' fill='%2326DE70'/%3E%3Crect x='9' y='7' width='4' height='1' transform='rotate(-90 9 7)' fill='%2326DE70'/%3E%3Crect x='3' y='9' width='4' height='1' fill='%2326DE70'/%3E%3C/svg%3E")
      var(--color-dark);

	  background-repeat: no-repeat;
	  background-position: right 5px center;
	  background-size: 14px;
  }

  // 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:
      url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='8' transform='translate(1 1)' fill='%23696969'/%3E%3Crect x='3' width='4' height='1' fill='%23696969'/%3E%3Crect y='7' width='4' height='1' transform='rotate(-90 0 7)' fill='%23696969'/%3E%3Crect x='9' y='7' width='4' height='1' transform='rotate(-90 9 7)' fill='%23696969'/%3E%3Crect x='3' y='9' width='4' height='1' fill='%23696969'/%3E%3C/svg%3E")
      var(--color-black-supermuted);

    border-radius: 100px;

    background-repeat: no-repeat;
    background-position: left 5px center;
    background-size: 14px;

	transition: var(--transition);
	transition-property: background;
  }

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

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

    input:checked ~ span {

    }
    span {
      height: calc($size-lg + $border-thickness-lg);
      width: calc(($size-lg + $border-thickness-lg) * 2);
    }
  }
}