@import "../../helpers";
.sf-checkbox {
  --icon-size: 1.25rem;
  &__container {
     position: relative;
    display: flex;
    align-items: center;
    padding: var(--checkbox-padding);
    width: var(--checkbox-container-width);
    cursor: var(--checkbox-cursor, pointer);
  }
  &__checkmark {
    box-sizing: border-box;
    display: var(--checkbox-display, flex);
    align-items: center;
    justify-content: center;
    order: var(--checkbox-order);
    width: var(--checkbox-size, 1.5rem);
    height: var(--checkbox-size, 1.5rem);
    @include border(--checkbox-border, 1px, solid, var(--c-link));
    border-radius: var(--checkbox-border-radius);
    background: var(--checkbox-background, transparent);
    transition: background 150ms linear, border-color 150ms linear;
    .has-error & {
      --checkbox-border-color: var(--c-danger);
    }
    &:hover {
      --checkbox-border-color: var(--c-black);
      .has-error & {
        --checkbox-border-color: var(--c-danger);
      }
      .is-disabled & {
        --checkbox-border-color: var(--c-text-disabled);
      }
    }
    .is-disabled & {
      --checkbox-border-color: var(--c-text-disabled);
      &.is-active {
        --checkbox-background: var(--c-text-disabled);
      }
    }
    .has-error & {
      &.is-active {
        --checkbox-border-color: var(--c-danger);
        --checkbox-background: var(--c-danger);
      }
    }
  }
  &__label {
    flex: 1;
    margin: var(--checkbox-label-margin, 0 0 0 var(--spacer-xs));
    color: var(--checkbox-label-color, var(--c-link));
    @include font(
      --checkbox-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.6,
      var(--font-family--primary)
    );
    transition: color 150ms linear;
    &:hover {
      --checkbox-label-color: var(--c-black);
      .sf-checkbox--is-disabled & {
        --checkbox-label-color: var(--c-text-disabled);
      }
    }

  }
  &.is-active {
    --checkbox-border-color: var(--c-primary);
    --checkbox-background: var(--c-primary);
    &.has-error {
      --checkbox-label-color: var(--c-text);
    }
    &.has-error {
      --checkbox-border-color: var(--c-danger);
      --checkbox-background: var(--c-danger);
      --checkbox-message-color: var(--c-danger);
    }
    &.is-disabled {
      --checkbox-border-color: var(--c-text-disabled);
      --checkbox-background: var(--c-text-disabled);
    }
  }
  &.is-required {
    --checkbox-message-color: var(--c-text);
    &.has-error {
      --checkbox-message-color: var(--c-danger);
    }
  }
  &.is-disabled {
    --checkbox-label-color: var(--c-text-disabled);
    --checkbox-border-color: var(--c-text-disabled);
  }
  &__message {
    margin: var(--checkbox-message-margin, var(--spacer-2xs) 0 0 0);
    color: var(--checkbox-message-color, var(--c-danger));
    @include font(
      --checkbox-message-font,
      var(--font-weight--normal),
      var(--font-size--xs),
      1.2,
      var(--font-family--secondary)
    );
    .sf-checkbox__message--info {
      color: var(--checkbox-message-color, var(--c-primary));
    }
  }
  
  input {
    position: absolute;
    opacity: 0;
    left: -1000%;
    width: 1px;
    height: 1px;
    &[style*="outline: none"]:focus + .sf-checkbox__checkmark {
      outline: none;
    }
    &:focus + .sf-checkbox__checkmark {
      outline-color: -webkit-focus-ring-color;
      outline-style: auto;
    }
  }
}