@use 'sass:color';
/* stylelint-disable */
@use '../colours';
@use '../responsive';
@use '../accessibility';
@use '../layout';
@use 'forms';

.container {
  @include forms.standard-input-dimensions();

  display: inline-block;
  margin-top: layout.$spacing-height;
}

.radio {
  clear: left;
  display: block;
  float: left;
  line-height: initial;
  padding: 0 0 0 40px;
  position: relative;

  @include responsive.respond-to(tablet, desktop) {
    padding: 0 0 0 44px;
  }
}

.children {
  display: block;
  float: left;
  padding: 10.5px 1em;
  touch-action: manipulation;

  &::before {
    background: transparent;
    border: colours.$input-border;
    border-radius: 34px;
    content: '';
    height: 34px;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 34px;
  }

  &::after {
    background: transparent;
    border: 8px solid colours.$mid-grey;
    border-radius: 34px;
    content: '';
    filter: alpha(opacity=0);
    height: 0;
    left: 14px;
    opacity: 0;
    position: absolute;
    top: 14px;
    width: 0;
    zoom: 1;
  }
}

.input {
  @include forms.standard-input-dimensions(true);

  filter: alpha(opacity=0);
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 1;
  zoom: 1;

  &:disabled {
    & + .children {
      filter: alpha(opacity=50);
      zoom: 1;
    }

    &:not(.readOnly) + .children {
      opacity: 0.5;
    }
  }

  &:focus + .children::before {
    box-shadow: 0 0 0 3px colours.$outline;
  }

  &:enabled:hover {
    & + .children {
      @include accessibility.hover;
    }

    & + .children::before {
      border-color: color.adjust(
        colours.$light-grey,
        $lightness: -(colours.$color-change-percentage)
      );
    }
  }

  &:checked + .children::after {
    filter: alpha(opacity=100);
    opacity: 1;
    zoom: 1;
  }
}
