@import '../../../styles/variables.scss';

.shortcut-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;

  &:active {
    opacity: var(--tk-touch-feedback-opacity);
  }

  &__icon-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
  }

  &__icon {
    font-size: 22px;
    line-height: 1;
  }

  &__badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: $dan;
    color: $white;
    font-size: var(--tk-font-micro);
    font-weight: 700;
    border-radius: $r-pill;
    padding: 0 4px;
  }

  &__label {
    font-size: var(--tk-font-cap);
    color: $tx2;
  }

  // ── 色彩变体（对齐 SPEC T.priL/T.accL/T.wrnL/T.danL）──
  &--pri .shortcut-btn__icon-wrap {
    background: #D4E5F0;
  }
  &--pri .shortcut-btn__icon {
    color: #3A6B8C;
  }

  &--acc .shortcut-btn__icon-wrap {
    background: #E8F0E8;
  }
  &--acc .shortcut-btn__icon {
    color: #5B7A5E;
  }

  &--wrn .shortcut-btn__icon-wrap {
    background: #FFF3E0;
  }
  &--wrn .shortcut-btn__icon {
    color: #C4873A;
  }

  &--dan .shortcut-btn__icon-wrap {
    background: #FDEAEA;
  }
  &--dan .shortcut-btn__icon {
    color: #B54A4A;
  }
}