pc-scala-icon-selector {
  display: inline-block;

  .scala-icon-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family, Arial, sans-serif);
  }

  .disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .scala-label {
    margin-right: 8px;
    font-weight: 500;
    min-width: 50px;
  }

  .s-icon-container {
    display: flex;
    gap: 5px;
  }

  .icon {
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.1s ease;
    user-select: none;
    font-size: 1.2rem;
  }

  .icon:hover {
    transform: scale(1.1);
  }

  .icon.inactive {
    filter: grayscale(1);
    opacity: 0.2;
  }

  .icon.active {
    filter: none;
    opacity: 1;
  }

  /* Neuer Stil für Icons, die bei Hover aktiviert werden */
  .icon.hover-active {
    filter: none !important;
    opacity: 0.9;
  }

  .disabled .icon {
    cursor: not-allowed;
    transform: none;
  }
}