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

/// Radio

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

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

/// -------------------
/// Radio swatches
/// -------------------

$size: 1.5rem !default;

/// -------------------
/// Radio selectors
/// -------------------

.radio {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background-color: #fff;
  border-radius: corners.$round;
  border: borders.$ui-three;
  height: $size;
  width: $size;
  box-sizing: border-box;
  transition: all transitions.$ease;
  cursor: pointer;

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

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

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

.radio__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/// -------------------
/// Radio icon
/// -------------------

.radio__icn {
  @include lib.utilities-center;
  width: 0;
  height: 0;
  border-radius: corners.$round;
  transition: width 0.2s ease, height 0.2s ease;

  .radio:checked > &,
  .radio--checked > & {
    width: $size * 0.5;
    height: $size * 0.5;
    transform-origin: center;
    background-color: colours.$brand-one;
  }
}
