@use '../../token/scss' as *;

@mixin checkbox {
  .cck-checkbox {
    display: flex;
    user-select: none;
  }

  .cck-checkbox__wrapper {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
  }

  .cck-checkbox__input-wrapper {
    display: inline-block;
    position: relative;
    box-sizing: content-box;
    line-height: 0;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
  }

  .cck-checkbox__input {
    position: absolute;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;

    &:focus-visible ~ .cck-checkbox__background {
      box-shadow: 0 0 0 1px $state-brand-selected;
      border: 2px solid $state-brand-selected;
    }
  }

  .cck-checkbox__background {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: $radi-4;
    pointer-events: none;
    will-change: background-color, outline-color;
    transition:
      background-color 90ms cubic-bezier(0.4, 0, 0.6, 1),
      border-color 90ms cubic-bezier(0.4, 0, 0.6, 1);
    border: 2px solid $base-border;
    background-color: $base-fill-1;
  }

  .cck-checkbox.cck-checkbox--disabled {
    .cck-checkbox__background {
      border: 2px solid transparent;
      background-color: $base-disabled;
    }

    .cck-checkbox__label {
      color: $base-disabled;
    }

    * {
      cursor: default;
    }
  }

  .cck-checkbox--indeterminate {
    .cck-checkbox__background {
      border: 2px solid $state-brand-active;
      background-color: $state-brand-active;
    }

    .cck-checkbox__checkmark {
      transform: rotate(45deg);
      opacity: 0;
      transition:
        opacity 90ms cubic-bezier(0.4, 0, 0.6, 1),
        transform 90ms cubic-bezier(0.4, 0, 0.6, 1);
    }

    .cck-checkbox__mixedmark {
      transform: scaleX(1) rotate(0deg);
      opacity: 1;
    }
  }

  .cck-checkbox__mixedmark {
    width: 100%;
    height: 0;
    transform: scaleX(0) rotate(0deg);
    border-width: 2px;
    border-radius: 100px;
    border-style: solid;
    opacity: 0;
    transition:
      opacity 90ms cubic-bezier(0.4, 0, 0.6, 1),
      transform 90ms cubic-bezier(0.4, 0, 0.6, 1);
    border-color: #fff;
    margin: 2px;
  }

  .cck-checkbox__checkmark {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 180ms cubic-bezier(0.4, 0, 0.6, 1);
    color: #fff;
    padding: 2px;
  }

  .cck-checkbox--checked {
    .cck-checkbox__background {
      border: 2px solid $state-brand-active;
      background-color: $state-brand-active;
    }

    .cck-checkbox__checkmark {
      opacity: 1;
    }
  }

  .cck-checkbox__checkmark-path {
    fill: currentcolor;
  }

  .cck-checkbox__label {
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    order: 0;
    text-align: left;
    color: $text-dark-primary;
    cursor: pointer;
    white-space: nowrap;

    &:empty {
      display: none;
    }
  }

  .cck-checkbox__size {
    &--sm {
      .cck-checkbox__wrapper {
        gap: $spacing-7;
      }

      .cck-checkbox__input-wrapper {
        width: 22px;
        height: 22px;
      }

      .cck-checkbox__label {
        font: $text-sm-font-medium;
      }
    }

    &--md {
      .cck-checkbox__wrapper {
        gap: $spacing-7;
      }

      .cck-checkbox__input-wrapper {
        width: 24px;
        height: 24px;
      }

      .cck-checkbox__label {
        font: $text-base-font-medium;
      }
    }

    &--lg {
      .cck-checkbox__wrapper {
        gap: $spacing-8;
      }

      .cck-checkbox__input-wrapper {
        width: 32px;
        height: 32px;
      }

      .cck-checkbox__label {
        font: $text-lg-font-medium;
      }
    }

    &--xl {
      .cck-checkbox__wrapper {
        gap: $spacing-8;
      }

      .cck-checkbox__input-wrapper {
        width: 32px;
        height: 32px;
      }

      .cck-checkbox__label {
        font: $text-xl-font-medium;
      }
    }
  }
}