// src/components/TCheckBox/TCheckBoxSquare.module.less

@SQUARE_BORDER_DEFAULT: #cccccc;
@SQUARE_BORDER_ACTIVE: #c70850;
@SQUARE_BG_SELECTED: #7a808d;
// @SQUARE_BG_SELECTED: #C70850;
.tCheckBoxSquare {
  min-width: 45px !important;
  min-height: 45px !important;
  width: 45px !important;
  height: 45px !important;
  border: 3px solid @SQUARE_BORDER_DEFAULT !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background 0.15s,
    border 0.15s !important;

  &:hover,
  &:focus,
  &.focus {
    border-color: @SQUARE_BORDER_ACTIVE !important;
    border-width: 4px !important; // 🔥 포커스 시 굵은 테두리
  }

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px !important;
    height: 10px !important;
    border-left: 4px solid #fff !important;
    border-bottom: 4px solid #fff !important;
    transform: translate(-50%, -70%) rotate(-45deg) scale(0);
    border-radius: 0 !important;
    transition: transform 0.2s ease-in-out !important;
  }

  &.selected {
    border-color: @SQUARE_BG_SELECTED !important;
    border-width: 4px !important;
    background-color: @SQUARE_BG_SELECTED !important;
    &::before {
      transform: translate(-50%, -70%) rotate(-45deg) scale(1);
    }
  }

  &.selectedFocus {
    border-color: @SQUARE_BORDER_ACTIVE !important;
    border-width: 4px !important;
    background-color: @SQUARE_BG_SELECTED !important;

    &::before {
      transform: translate(-50%, -70%) rotate(-45deg) scale(1);
    }
  }

  &.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;

    &:hover,
    &:focus {
      border-color: @SQUARE_BORDER_DEFAULT !important;
    }
  }
}