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

.cds-checkbox-item {
  // @include abstract.debug();
  $this: &;
  @include abstract.relative();

  display: inline-flex;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  cursor: pointer;

  &__icon {
    flex: none;
    margin-right: 16px;

    .cds-feature-icon__svg-wrap {
      width: 100%;
      height: 100%;
    }

    svg {
      width: 100% !important;
      height: 100% !important;
    }
  }

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

  &__support {
    color: var(--gray-400);
    display: block;
  } // support

  &:hover {
    border-color: var(--gray-400);

    #{$this}__input {
      @include input.input-hover();
      border-radius: 50%;
    }
  } // hover

  &.is-checked input {
    // @include abstract.debug;
    border-color: var(--gray-700);
  }

  &.is-disabled input {
    border-color: var(--gray-200);
  }

  &:focus-within {
    border-color: var(--gray-400);
    box-shadow: var(--shadow-xs-focused-4px-primary-gray-100);
  }

  &.is-checked,
  &.is-checked:focus-within {
    background-color: var(--secondary-gray-blue-50);
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--secondary-gray-blue-450);
  }

  &.is-checked:focus-within {
    box-shadow: inset 0 0 0 2px var(--secondary-gray-blue-450), var(--shadow-xs-focused-4px-primary-gray-100);
  }

  &.is-disabled {
    background-color: var(--gray-50);
    border-color: var(--gray-200);
    box-shadow: none;
  }

  // type
  // default: 아이콘 안보임 checkbox, radio가 앞으로 나옴
  // ==============================================================================
  &#{$this}--default {
    align-items: center;
    gap: 8px;
    min-height: 53px;
    padding: 5px 16px 4px;

    #{$this}__input {
      @include abstract.relative($top: auto, $right: auto);
    }
  }

  // icon-card: currentType이 radio일 경우 check 아이콘 숨김
  // icon-card: currentType이 radio이 아닐 경우 svg icon 왼쪽 input 아이콘 오른쪽
  // ==============================================================================
  &--icon-card {
    #{$this}__input {
      @include abstract.absolute($top: 16px, $right: 16px);
    }

    .cds-checkbox-input--radio {
      z-index: -1;

      input {
        border: 0;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        z-index: -1;
      }

      :where(input:focus) {
        box-shadow: none;
      }
    }

    &__icon,
    &__content {
      position: relative;
      pointer-events: none;
    }

    &:hover .cds-checkbox-input--radio {
      background-color: transparent;
    }

    &:hover .cds-checkbox-input__ico {
      border-color: var(--gray-400);
    }
  }

  // size
  // ==============================================================================
  &--sm {
    font-size: 14px;

    #{$this}__icon {
      width: 32px;
      height: 32px;
    }

    .cds-feature-icon__svg-wrap {
      width: 16px;
      height: 16px;
    }
  } // sm

  &--md {
    #{$this}__icon {
      // @include abstract.debug;
      width: 40px;
      height: 40px;
    }

    .cds-feature-icon__svg-wrap {
      width: 20px;
      height: 20px;
    }

    #{$this}__text {
      font-size: token.$font-size-3;
    }
  }

  @include abstract.media-bp-up('md') {
    &--md {
      #{$this}__icon {
        width: 32px;
        height: 32px;
      }

      .cds-feature-icon__svg-wrap {
        width: 16px;
        height: 16px;
      }

      #{$this}__text {
        font-size: token.$font-size-2;
      }

      #{$this}__support {
        font-size: token.$font-size-1;
      }
    }
  }
}