@use "scss/colors";
@use "scss/variables";

$lg-size: 18px;
$sm-size: 14px;

.container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: variables.$border-thin solid colors.$grey-200;
  border-radius: variables.$border-radius-2xs;
  background-color: colors.$foreground;
  cursor: pointer;
  transition: 0.2s ease-in;

  &:hover {
    border-color: colors.$blue;
  }

  .focusRing {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    pointer-events: none;
  }

  input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
  }

  &:not(.disabled) input:focus-visible + .focusRing {
    outline: 2px solid colors.$blue-400;
    outline-offset: 2px;
    border-radius: 3px;
  }

  &.checked {
    background-color: colors.$blue-400;
    border-color: colors.$blue-400;
    color: colors.$foreground;

    &:hover {
      background-color: colors.$blue-500;
      border-color: colors.$blue-500;
    }
  }

  &.indeterminate {
    background-color: colors.$blue-400;
    border-color: colors.$blue-400;
    color: colors.$foreground;

    &:hover {
      background-color: colors.$blue-500;
      border-color: colors.$blue-500;
    }
  }

  &.disabled {
    border-color: colors.$grey-100;
    color: colors.$grey-300;
    cursor: not-allowed;

    input {
      cursor: not-allowed;
    }

    &.checked,
    &.indeterminate {
      background-color: colors.$blue-200;
      border-color: colors.$blue-200;
      color: colors.$foreground;
    }
  }
}

.sizeLg {
  height: $lg-size;
  width: $lg-size;
  min-width: $lg-size;
}

.sizeSm {
  height: $sm-size;
  width: $sm-size;
  min-width: $sm-size;
}
