hy-checkbox.scss

.hy-checkbox {
  display: inline-block;
  position: relative;
  margin-right: 1rem;
}

.hy-checkbox__checkmark {
  border-color: var(--link-blue);
  border-style: solid inset solid solid;
  border-width: 2px;
  height: 20px;
  margin-right: 6px;
  min-width: 20px;
  min-height: 20px;
  position: relative;
  width: 20px;

  svg {
    bottom: 0;
    left: 0;
    position: absolute;
    visibility: hidden;
  }

  &::before {
    background-color: var(--grayscale-white);
    content: '';
    height: 10px;
    position: absolute;
    right: 0;
    transform: rotate(40deg) translate(6%, -55%);
    visibility: hidden;
    width: 8px;
  }
}

.hy-checkbox__label {
  @include font-size(14px, 20px);
  align-items: center;
  color: var(--grayscale-black);
  display: inline-flex;
  font-family: var(--main-font-family);
  letter-spacing: -0.4px;
  text-align: left;

  @include breakpoint($narrow) {
    @include font-size(16px, 20px);
  }
}

.hy-checkbox__checkbox {
  height: 100%;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 10;

  &:checked {
    & + label {
      color: var(--grayscale-black);

      .hy-checkbox__checkmark {
        svg,
        &::before {
          visibility: visible;
        }
      }
    }
  }

  &:hover {
    cursor: pointer;

    & + label {
      color: var(--brand-main);
    }
  }

  &:focus {
    & + label {
      outline-offset: 1px;
      outline: 2px solid var(--link-blue);
    }
  }
}

.hy-checkbox--button {
  display: inline-block;
  margin-right: 4px;
  position: relative;

  &__label {
    @include font-size(12px, 14px);

    align-items: center;
    border: 0.5px solid var(--grayscale-medium-dark);
    color: var(--link-blue);
    display: inline-flex;
    font-family: var(--main-font-family);
    font-weight: 600;
    letter-spacing: -0.3px;
    padding: 12px 15px 12px 13px;
    z-index: 1;

    @include breakpoint($wide) {
      @include font-size(14px, 18px);

      letter-spacing: -0.4px;
      padding: 9px 8px 9px 8px;
    }
  }

  &__checkmark {
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;

    @include breakpoint($wide) {
      right: 10px;
      bottom: calc(50% + 10px);
    }

    svg {
      bottom: 0;
      left: 0;
      position: absolute;
      visibility: hidden;
    }
  }

  &__label-icon {
    height: 13px;
    position: absolute;
    width: 12px;

    @include breakpoint($wide) {
      padding: 10px;
      right: -6px;
      top: calc(50% + 5px);
    }

    svg {
      background: var(--grayscale-white);
      height: 12px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
    }
  }

  &__checkbox {
    height: 100%;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 10;

    &:checked {
      & + label {
        border: 1px solid var(--grayscale-black);
        color: var(--grayscale-black);
        padding: 12px 15px 12px 13px;

        @include breakpoint($wide) {
          border: 2px solid var(--grayscale-black);
          padding: 8px 26px 8px 7px;
        }

        .hy-checkbox--button__checkmark {
          .hy-checkbox--button__label-icon {
            background: var(--grayscale-white);
          }

          svg {
            visibility: visible;
          }
        }
      }
    }

    &:hover {
      cursor: pointer;
    }

    &:focus {
      & + label {
        outline-offset: 1px;
        outline: 1px solid var(--link-blue);
      }
    }
  }
}