@use '../colours';
@use '../responsive';
@use '../accessibility';
@use '../layout';
@use 'forms';

.container {
  display: block;
  height: auto;
  margin: layout.$spacing-height 0 0 0;
  width: 100%;

  @include forms.standard-input-dimensions;

  @include responsive.respond-to(tablet, desktop) {
    width: fit-content;
  }
}

.checkbox {
  display: block;
  line-height: initial;
  padding: 0 0 0 40px;
  position: relative;

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

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

  &::before {
    background: colours.$white;
    border: colours.$input-border;
    border-radius: 2px;
    content: '';
    left: 0;
    position: absolute;
    top: 0;

    @include forms.standard-input-dimensions(true, 2);
  }

  &::after {
    background: transparent;
    border: solid colours.$mid-grey;
    border-top-color: transparent;
    border-width: 0 0 5px 5px;
    content: '';
    height: 7px;
    left: 10px;
    opacity: 0;
    position: absolute;
    top: 12px;
    transform: rotate(-45deg);
    width: 20px;
    zoom: 1;

    @include responsive.respond-to(tablet, desktop) {
      height: 9px;
      width: 22px;
    }
  }
}

.input {
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 1;
  zoom: 1;

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

  &:disabled {
    & + .children {
      opacity: 0.5;
      zoom: 1;
    }
  }

  &:focus + .children::before {
    border-color: colours.$black;
    border-radius: 0;
    box-shadow: 0 0 0 layout.$outline-size colours.$outline;
  }

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

    & + .children::before {
      border-color: colours.$black;
      border-radius: 0;
    }
  }

  &:checked + .children::after {
    opacity: 1;
    zoom: 1;
  }
}
