@use '../abstracts' as *;

/* Atom checkbox */
yap-checkbox {
  display: flex;
  align-items: center;
}

.a-checkbox {
  $this: &;
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-bottom: toRem(10);
  cursor: pointer;

  // Ensure clickable when no text in label
  &:before{
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  &__input {
    @include outlineOnFocus($border-radius: 2px);
    display: grid;
    place-content: center;
    width: toRem(18);
    height: toRem(18);
    border-width: 1px;
    border-style: solid;
    font: inherit;
    color: currentColor;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
    transform: translateY(-0.075em);

    &::before,
    &::after {
      content: '';
      position: absolute;
      left: toRem(6);
      bottom: toRem(4);
      width: toRem(2);
      display: table;
      display: inline-block;
      border-radius: .125em;
      background: transparent;
      transform-origin: 50% calc(100% - .0625em);
    }

    &::before {
      height: toRem(9);
      transform: rotate(35deg);
    }

    &::after {
      height: toRem(5);
      transform: rotate(-55deg);
    }
  }

  &__text {
    padding-left: toRem(7);
    cursor: pointer;
  }

  &__input:disabled ~ #{$this}__checkmark,
  &__input:disabled ~ #{$this}__text {
    opacity: 0.7;
    cursor: not-allowed;
  }
}