@use '../../styles/variables' as *;



.element {
  --border-color: #202020;
  cursor: pointer;

  &.elementActive {
    outline: 2px solid $main-color-links;
    outline-offset: .2em;
  }

  &.elementDisabled {
    --border-color: #818181;
  }

  .label {
    color: var(--border-color);
  }

  .state {
    --border-width: 1px;
    --padding: calc(var(--border-width) * 3);
    --square-size: .8em;

    display: flex;
    gap: .3em;
    user-select: none;

    .stateContainer {
      background-color: $extra-background-color;
      border: var(--border-width) solid var(--border-color);
      display: inline-block;
      height: calc(var(--square-size) + (var(--padding) * 2) + (var(--border-width) * 2));
      padding: 0 var(--padding);
      position: relative;
      width: calc((var(--square-size) * 1.90) + (var(--padding) * 2) + (var(--border-width) * 2));
    }

    .position {
      background-color: var(--border-color);
      display: inline-block;
      height: var(--square-size);
      position: relative;
      width: var(--square-size);
    }
  }
}

.input {
  position: absolute;
  left: -9999em;

  &:checked ~ .state {
    .position {
      left: calc(var(--square-size) * .9);
    }
  }
}