.pix-label-wrapped {
  display: flex;
  gap: var(--pix-spacing-2x);
  align-items: center;
  cursor: pointer;

  &--variant-modulix {
    position: relative;
    z-index: -2;
    padding: var(--pix-spacing-3x) var(--pix-spacing-4x);
    background: var(--pix-neutral-0);
    border: 1px solid var(--pix-neutral-100);
    border-radius: 8px;

    &:focus-within {
      border: 1px solid var(--pix-primary-500);
      outline: 2px solid var(--pix-primary-300);
    }

    &:hover,
    &:active {
      background: var(--pix-primary-10);
    }

    &.pix-label-wrapped {
      &.pix-label-wrapped--state-modulix-declarative {
        border-color: var(--pix-neutral-500);
      }

      &--disabled {
        --state-background-color: var(--pix-neutral-20);
        --state-border-color: var(--pix-neutral-100);

        &.pix-label-wrapped--state-success {
          --state-background-color: var(--pix-neutral-0);
          --state-border-color: var(--pix-success-300);

          color: var(--pix-success-700);
        }

        &.pix-label-wrapped--state-error {
          --state-background-color: var(--pix-neutral-0);
          --state-border-color: var(--pix-error-500);

          color: var(--pix-error-700);
        }

        &.pix-label-wrapped--state-modulix-error {
          --state-border-color: var(--pix-warning-700);
          --state-background-color: var(--pix-warning-50);

          color: var(--pix-warning-700);
        }

        &.pix-label-wrapped--state-modulix-success {
          --state-border-color: var(--pix-success-700);
          --state-background-color: var(--pix-success-50);

          color: var(--pix-success-700);
        }

        &.pix-label-wrapped--state-modulix-declarative {
          --state-border-color: transparent;
          --state-background-color: var(--pix-primary-100);

          color: var(--pix-neutral-900);
        }

        &.pix-label-wrapped--state-modulix-declarative-selected {
          --state-border-color: var(--pix-neutral-500);
          --state-background-color: var(--pix-neutral-0);

          color: var(--pix-neutral-900);
        }

        & .pix-label-wrapped__state-icon {
          z-index: 1;
          width: 1rem;
          height: 1rem;
          padding: 0;
          background-color: var(--state-background-color);
          border: 0;
        }

        // stylelint-disable-next-line no-duplicate-selectors
        & {
          background: var(--state-background-color);
          border-color: var(--state-border-color);
        }

        &:hover,
        &:active {
          background: var(--state-background-color);
        }
      }
    }
  }

  &--disabled {
    cursor: not-allowed;
  }
}