@use '../../base/token';
@use '../../abstract';
@use './checkbox-input' as input;
@use '../../sprite';

// ===================================
// cds-checkbox
// size: (default) sm / md
// ===================================

.cds-checkbox {
  // @include abstract.debug();
  $this: &;
  $size: 16px;
  $radius: 4px;
  @include abstract.relative();

  line-height: 1.5;
  font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-0);
  vertical-align: top;
  font-size: abstract.rem(token.$font-size-1);
  cursor: pointer;

  &.is-new {
    position: relative;

    &::after {
      @include abstract.bg2x-sprite();
      @include abstract.sprite2x(sprite.$ico-new);

      content: '';
    }
  }

  &__text {
    display: block;
    color: var(--gray-500);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
  }

  &__support-text {
    color: var(--gray-400);
  }

  &:hover #{$this}__input {
    @include input.input-hover();

    &#{$this}-input--radio,
    &#{$this}-input--check-circle {
      border-radius: 50%;
    }
  }

  // size (md)
  // ===========================

  &--md {
    font-size: abstract.rem(token.$font-size-2);
  } //md

  // has text
  // ============================
  &.has-text {
    display: inline-flex;
    gap: 8px;

    #{$this}__input {
      transform: translateY(2px);
    }
  }
}