.palette-item {
  display: inline-flex;
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

  .palette-item svg rect {
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  }

  .palette-item:hover svg rect {
    transform: scale(1.08);
    box-shadow: 0 0 6px rgba(0,0,0,0.25);
  }

  .palette-item.focused {
    outline: 2px solid var(--accent-fill-rest, #2563EB);
    outline-offset: 2px;
  }

  .palette-item.selected {
    outline: 2px solid var(--accent-fill-rest, #2563EB);
    outline-offset: -2px;
  }

.palette-item {
  transition: outline 0.2s ease, box-shadow 0.2s ease;
}

  .palette-item.focused {
    outline: 2px solid var(--accent-fill-rest, #2563EB);
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.4);
    z-index: 1;
  }

    .palette-item.focused svg rect {
      animation: pulseFocus 0.2s ease;
    }

@keyframes pulseFocus {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}


@keyframes vibrate {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-2px);
  }

  50% {
    transform: translateX(2px);
  }

  75% {
    transform: translateX(-2px);
  }

  100% {
    transform: translateX(0);
  }
}

.palette-item.selected-flash {
  animation: flashSelected 0.3s ease, vibrate 0.2s ease;
}
