@use 'colours';
@use 'typography';

.checkbox-wrapper {
  input[type='checkbox'] {
    opacity: 0;
    position: absolute;
    left: -9999px;
  }

  label {
    position: relative;
    display: inline-block;
    padding-left: 35px;
    margin-bottom: 18px;
    cursor: pointer;
    user-select: none;
    line-height: 26px;
  }

  label::before,
  label::after {
    position: absolute;
    content: '';
    display: inline-block;
  }

  label::before {
    height: 26px;
    width: 26px;

    border: 2px solid colours.$colour-checkbox;
    left: 0;
    top: 0;
  }

  label::after {
    height: 8px;
    width: 15px;
    border-left: 3px solid;
    border-bottom: 3px solid;

    transform: rotate(-45deg);

    color: colours.$colour-admiralty-blue;

    left: 6px;
    top: 7px;
  }

  .checkboxRight {
    padding-left: unset;
    padding-right: 35px;

    &:before {
      left: unset;
      right: 0px;
    }
    &:after {
      left: unset;
      right: 6px;
    }
  }

  input[type='checkbox'] + label::after {
    content: none;
  }

  input[type='checkbox']:checked + label::after {
    content: '';
  }
}