/// ----------------------------------------------------------------------

/// Checkbox

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'colours';
@use 'corners';
@use 'spacing';
@use 'borders';
@use 'transitions';
@use 'states';
@use 'z-index';

/// -------------------
/// Checkbox swatches
/// -------------------

$size: 1.5rem !default;

/// -------------------
/// Checkbox selectors
/// -------------------

.checkbox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  background-color: colours.$ui-one;
  border-radius: corners.$base;
  height: $size;
  width: $size;
  transition: all transitions.$ease;
  border: borders.$ui-three;

  &--disabled,
  &:disabled {
    @include states.disabled;
  }

  &:checked,
  &--checked {
    border-color: colours.$ui-three;
  }

  &:focus-within {
    @include states.focus;
  }
}

/// -------------------
/// Hide default input
/// -------------------

.checkbox__input {
  @include lib.utilities-center;
  cursor: pointer;
  opacity: 0;
  width: $size * 1.75;
  height: $size * 1.75;
  margin: 0;
  z-index: z-index.$default;
}

/// -------------------
/// Checkbox icon
/// -------------------

.checkbox__icn {
  @include lib.utilities-center;
  width: 0;
  height: 0;
  background-color: colours.$brand-one;
  border-radius: corners.$base / 2;
  transition: width 0.2s ease, height 0.2s ease;

  .checkbox:checked > &,
  .checkbox--checked > & {
    width: $size * 0.5;
    height: $size * 0.5;
  }
}
