@use '../../variables' as *;
@use 'sass:math';
$circleSize: $size-xs;
$circleInnerSize: math.div($circleSize, 2);
$circleBorderWidth: 1px;

.container {
  position: relative;
  cursor: pointer;

  &.disabled {
    color: var(--color-neutral-30);
  }

  &.error {
    color: var(--color-warning-30);
  }

  /* Hide the browser's default checkbox */
  input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;

    /* When the checkbox is checked, add a blue background */

    &:checked ~ .circle {
      background-color: var(--color-accent-30);
      &::after {
        display: block;
      }
    }
    &:not(:checked):focus-visible ~ .circle {
      &::before {
        display: block;
        content: '';
        pointer-events: none;
        position: absolute;
        top: -3px;
        left: -3px;
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        outline: 1px solid var(--color-neutral-30);
        border-radius: 50%;
      }
    }
  }

  &:not(.disabled) {
    input:checked ~ .circle {
      color: var(--color-accent-30);
    }
  }
}

/* Hide the browser's default checkbox */

/* Create a custom checkbox */
.circle {
  position: absolute;
  top: 4px;
  left: 0;
  width: $circleSize;
  height: $circleSize;
  border-radius: 50%;
  border: $circleBorderWidth solid currentColor;
  cursor: pointer;

  &::after {
    position: absolute;
    display: none;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // top: #{($circleSize - $circleInnerSize) / 2 - $circleBorderWidth};
    // left: #{($circleSize - $circleInnerSize) / 2- $circleBorderWidth};
    width: $circleInnerSize;
    height: $circleInnerSize;
    background: var(--color-neutral-100);
    border-radius: 50%;
  }
}

.label {
  padding-left: $size-s;
  position: relative;
  cursor: pointer;
}

.micro {
  font-size: $font-micro;
}
.small {
  font-size: $font-small;
}
.base {
  font-size: $font-base;
}
.large {
  font-size: $font-base;
}