myprojplanet_vite/src/components/CMyChipList/CMyChipList.scss

// ========================================
// CMyChipList - RISO Design System
// ========================================

.c-chiplist {
  margin-bottom: $s-sm;

  @media (max-width: $mobile) {
    margin-bottom: $s-xs;
  }
}

// ========================================
// LABEL
// ========================================
.c-chiplist__label {
  font-size: 0.9125rem;
  font-weight: 600;
  color: $mainColor;
  margin-bottom: $s-xs;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, $mainColor, lighten($mainColor, 12%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  @media (max-width: $mobile) {
    font-size: 0.85rem;
    margin-bottom: 4px;
  }
}

// ========================================
// CHIPS CONTAINER
// ========================================
.c-chiplist__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  @media (max-width: $mobile) {
    gap: 4px;
  }
}

// ========================================
// SINGLE CHIP - RISO Style
// ========================================
.c-chip {
  position: relative;
  overflow: hidden;
  border-radius: 20px !important;
  font-size: 0.9125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 10px !important;
  height: auto !important;
  min-height: 26px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  
  @media (max-width: $mobile) {
    font-size: 0.85rem;
    padding: 2px 4px !important;
    min-height: 24px;
    border-radius: 16px !important;
  }

  // Gradiente di luce animato
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 255, 255, 0.25), 
      transparent
    );
    transition: left 0.5s ease;
  }

  // Testo con ombra per leggibilità
  &::v-deep(.q-chip__content) {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    
    @media (max-width: $mobile) {
      font-size: 0.75rem;
    }
  }

  // Icona
  &::v-deep(.q-icon) {
    font-size: 1rem;
    margin-right: 4px;
    transition: transform 0.25s ease;
    
    @media (max-width: $mobile) {
      font-size: 0.875rem;
      margin-right: 3px;
    }
  }

  // Hover effect
  &:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.12);

    &::before {
      left: 100%;
    }

    &::v-deep(.q-icon) {
      transform: scale(1.1) rotate(5deg);
    }
  }

  // Dense variant
  &.q-chip--dense {
    padding: 3px 8px !important;
    min-height: 24px;
    font-size: 0.75rem;

    @media (max-width: $mobile) {
      padding: 2px 6px !important;
      min-height: 22px;
      font-size: 0.6875rem;
    }
  }
}

// ========================================
// SIZE VARIANTS
// ========================================

// Medium size
.c-chip--md {
  font-size: 0.9375rem !important;
  padding: 6px 14px !important;
  min-height: 34px !important;
  border-radius: 24px !important;

  &::v-deep(.q-chip__content) {
    font-size: 0.9375rem;
  }

  &::v-deep(.q-icon) {
    font-size: 1.25rem !important;
    margin-right: 6px;
  }

  @media (max-width: $mobile) {
    font-size: 0.875rem !important;
    padding: 5px 12px !important;
    min-height: 32px !important;
    border-radius: 20px !important;

    &::v-deep(.q-chip__content) {
      font-size: 0.875rem;
    }

    &::v-deep(.q-icon) {
      font-size: 1.125rem !important;
      margin-right: 5px;
    }
  }
}

// Large size
.c-chip--lg {
  font-size: 1.0625rem !important;
  padding: 8px 18px !important;
  min-height: 42px !important;
  border-radius: 28px !important;
  font-weight: 600;

  &::v-deep(.q-chip__content) {
    font-size: 1.0625rem;
    font-weight: 600;
  }

  &::v-deep(.q-icon) {
    font-size: 1.5rem !important;
    margin-right: 8px;
  }

  @media (max-width: $mobile) {
    font-size: 1rem !important;
    padding: 7px 16px !important;
    min-height: 38px !important;
    border-radius: 24px !important;

    &::v-deep(.q-chip__content) {
      font-size: 1rem;
    }

    &::v-deep(.q-icon) {
      font-size: 1.375rem !important;
      margin-right: 7px;
    }
  }
}

// ========================================
// GRADIENTI PER COLORI - RISO Style
// ========================================

// Blue/Primary
.c-chip.bg-blue,
.c-chip.bg-primary,
.c-chip.bg-indigo,
.c-chip.bg-light-blue {
  background: linear-gradient(135deg, #1976d2, #42a5f5) !important;
  
  &:hover {
    background: linear-gradient(135deg, #1565c0, #1976d2) !important;
  }
}

// Teal/Cyan
.c-chip.bg-teal,
.c-chip.bg-cyan {
  background: linear-gradient(135deg, #00897b, #26a69a) !important;
  
  &:hover {
    background: linear-gradient(135deg, #00796b, #00897b) !important;
  }
}

// Green
.c-chip.bg-green,
.c-chip.bg-light-green {
  background: linear-gradient(135deg, #388e3c, #66bb6a) !important;
  
  &:hover {
    background: linear-gradient(135deg, #2e7d32, #388e3c) !important;
  }
}

// Purple/Deep Purple
.c-chip.bg-purple,
.c-chip.bg-deep-purple {
  background: linear-gradient(135deg, #7b1fa2, #9c27b0) !important;
  
  &:hover {
    background: linear-gradient(135deg, #6a1b9a, #7b1fa2) !important;
  }
}

// Pink
.c-chip.bg-pink {
  background: linear-gradient(135deg, #c2185b, #e91e63) !important;
  
  &:hover {
    background: linear-gradient(135deg, #ad1457, #c2185b) !important;
  }
}

// Orange/Amber
.c-chip.bg-orange,
.c-chip.bg-amber,
.c-chip.bg-deep-orange {
  background: linear-gradient(135deg, #f57c00, #ff9800) !important;
  
  &:hover {
    background: linear-gradient(135deg, #ef6c00, #f57c00) !important;
  }
}

// Yellow/Lime
.c-chip.bg-yellow,
.c-chip.bg-lime {
  background: linear-gradient(135deg, #f9a825, #fdd835) !important;
  color: rgba(0, 0, 0, 0.87) !important;
  
  &::v-deep(.q-chip__content) {
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    color: rgba(0, 0, 0, 0.87) !important;
  }
  
  &:hover {
    background: linear-gradient(135deg, #f57f17, #f9a825) !important;
  }
}

// Red/Negative
.c-chip.bg-red,
.c-chip.bg-negative {
  background: linear-gradient(135deg, #c62828, #e53935) !important;
  
  &:hover {
    background: linear-gradient(135deg, #b71c1c, #c62828) !important;
  }
}

// Brown
.c-chip.bg-brown {
  background: linear-gradient(135deg, #5d4037, #6d4c41) !important;
  
  &:hover {
    background: linear-gradient(135deg, #4e342e, #5d4037) !important;
  }
}

// Grey/Blue Grey
.c-chip.bg-grey,
.c-chip.bg-gray,
.c-chip.bg-blue-grey {
  background: linear-gradient(135deg, #546e7a, #78909c) !important;
  
  &:hover {
    background: linear-gradient(135deg, #455a64, #546e7a) !important;
  }
}

// ========================================
// ANIMAZIONE INGRESSO
// ========================================
@keyframes chipFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.c-chip {
  animation: chipFadeIn 0.25s ease-out backwards;

  // Stagger per chip multipli
  @for $i from 1 through 25 {
    &:nth-child(#{$i}) {
      animation-delay: #{$i * 0.04}s;
    }
  }
}

// ========================================
// RESPONSIVE TOUCH OPTIMIZATION
// ========================================
@media (max-width: $mobile) {
  .c-chip {
    // Touch target più grande su mobile
    min-height: 28px;
    
    &:active {
      transform: scale(0.96);
      transition-duration: 0.1s;
    }
  }
}