@import "tailwindcss";
@import "../tokens.css";

/* 
- neutral
- neutral-primary
- neutral-secondary
- neutral-tertiary
- neutral-onbrandprimary
- neutral-onbrandsecondary
- neutral-onsemantic
- brand-primary
- brand-secondary
- brand-onneutral
- semantic-error-primary
- semantic-error-secondary
- semantic-error-onneutral
- semantic-success-primary
- semantic-success-secondary
- semantic-success-onneutral
- semantic-warning-primary
- semantic-warning-secondary
- semantic-warning-onneutral
- disabled-default
- disabled-ondisabled
 */


@utility icon-neutral-default-default {
    color: var(--icon-neutral-default-default);
    stroke: var(--icon-neutral-default-default);
    fill: var(--icon-neutral-default-default);
}

@utility icon-neutral-default-hover {
    color: var(--icon-neutral-default-hover);
    stroke: var(--icon-neutral-default-hover);
    fill: var(--icon-neutral-default-hover);
}

@utility icon-neutral-default-pressed {
    color: var(--icon-neutral-default-pressed);
    stroke: var(--icon-neutral-default-pressed);
    fill: var(--icon-neutral-default-pressed);
}

@utility icon-neutral-primary-default {
    color: var(--icon-neutral-primary-default);
    stroke: var(--icon-neutral-primary-default);
    fill: var(--icon-neutral-primary-default);
}

@utility icon-neutral-primary-hover {
    color: var(--icon-neutral-primary-hover);
    stroke: var(--icon-neutral-primary-hover);
    fill: var(--icon-neutral-primary-hover);
}

@utility icon-neutral-primary-pressed {
    color: var(--icon-neutral-primary-pressed);
    stroke: var(--icon-neutral-primary-pressed);
    fill: var(--icon-neutral-primary-pressed);
}

 @utility icon-neutral-secondary-default {
    color: var(--icon-neutral-secondary-default);
    stroke: var(--icon-neutral-secondary-default);
    fill: var(--icon-neutral-secondary-default);
}

@utility icon-neutral-secondary-hover {
    color: var(--icon-neutral-secondary-hover);
    stroke: var(--icon-neutral-secondary-hover);
    fill: var(--icon-neutral-secondary-hover);
}

@utility icon-neutral-secondary-pressed {
    color: var(--icon-neutral-secondary-pressed);
    stroke: var(--icon-neutral-secondary-pressed);
    fill: var(--icon-neutral-secondary-pressed);
}

@utility icon-neutral-tertiary-default {
    color: var(--icon-neutral-tertiary-default);
    stroke: var(--icon-neutral-tertiary-default);
    fill: var(--icon-neutral-tertiary-default);
}

@utility icon-neutral-tertiary-hover {
    color: var(--icon-neutral-tertiary-hover);
    stroke: var(--icon-neutral-tertiary-hover);
    fill: var(--icon-neutral-tertiary-hover);
}

@utility icon-neutral-tertiary-pressed {
    color: var(--icon-neutral-tertiary-pressed);
    stroke: var(--icon-neutral-tertiary-pressed);
    fill: var(--icon-neutral-tertiary-pressed);
}

@utility icon-neutral-onbrandprimary-default {
    color: var(--icon-neutral-onbrandprimary-default);
    stroke: var(--icon-neutral-onbrandprimary-default);
    fill: var(--icon-neutral-onbrandprimary-default);
}

@utility icon-neutral-onbrandprimary-hover {
    color: var(--icon-neutral-onbrandprimary-hover);
    stroke: var(--icon-neutral-onbrandprimary-hover);
    fill: var(--icon-neutral-onbrandprimary-hover);
}

@utility icon-neutral-onbrandprimary-pressed {
    color: var(--icon-neutral-onbrandprimary-pressed);
    stroke: var(--icon-neutral-onbrandprimary-pressed);
    fill: var(--icon-neutral-onbrandprimary-pressed);
}

@utility icon-neutral-onbrandsecondary-default {
    color: var(--icon-neutral-onbrandsecondary-default);
    stroke: var(--icon-neutral-onbrandsecondary-default);
    fill: var(--icon-neutral-onbrandsecondary-default);
}

@utility icon-neutral-onbrandsecondary-hover {
    color: var(--icon-neutral-onbrandsecondary-hover);
    stroke: var(--icon-neutral-onbrandsecondary-hover);
    fill: var(--icon-neutral-onbrandsecondary-hover);
}   

@utility icon-neutral-onbrandsecondary-pressed {
    color: var(--icon-neutral-onbrandsecondary-pressed);
    stroke: var(--icon-neutral-onbrandsecondary-pressed);
    fill: var(--icon-neutral-onbrandsecondary-pressed);
}

@utility icon-neutral-onoverlay-default {
    color: var(--icon-neutral-onoverlay-default);
    stroke: var(--icon-neutral-onoverlay-default);
    fill: var(--icon-neutral-onoverlay-default);
}

@utility icon-neutral-onoverlay-hover {
    color: var(--icon-neutral-onoverlay-hover);
    stroke: var(--icon-neutral-onoverlay-hover);
    fill: var(--icon-neutral-onoverlay-hover);
}

@utility icon-neutral-onoverlay-pressed {
    color: var(--icon-neutral-onoverlay-pressed);
    stroke: var(--icon-neutral-onoverlay-pressed);
    fill: var(--icon-neutral-onoverlay-pressed);
}

@utility icon-neutral-onsemantic-default {
    color: var(--icon-neutral-onsemantic-default);
    stroke: var(--icon-neutral-onsemantic-default);
    fill: var(--icon-neutral-onsemantic-default);
}

@utility icon-neutral-onsemantic-hover {
    color: var(--icon-neutral-onsemantic-hover);
    stroke: var(--icon-neutral-onsemantic-hover);
    fill: var(--icon-neutral-onsemantic-hover);
}

@utility icon-neutral-onsemantic-pressed {
    color: var(--icon-neutral-onsemantic-pressed);
    stroke: var(--icon-neutral-onsemantic-pressed);
    fill: var(--icon-neutral-onsemantic-pressed);
}

@utility icon-brand-primary-default {
    color: var(--icon-brand-primary-default);
    stroke: var(--icon-brand-primary-default);
    fill: var(--icon-brand-primary-default);
}

@utility icon-brand-primary-hover {
    color: var(--icon-brand-primary-hover);
    stroke: var(--icon-brand-primary-hover);
    fill: var(--icon-brand-primary-hover);
}

@utility icon-brand-primary-pressed {
    color: var(--icon-brand-primary-pressed);
    stroke: var(--icon-brand-primary-pressed);
    fill: var(--icon-brand-primary-pressed);
}

@utility icon-brand-secondary-default {
    color: var(--icon-brand-secondary-default);
    stroke: var(--icon-brand-secondary-default);
    fill: var(--icon-brand-secondary-default);
}

@utility icon-brand-secondary-hover {
    color: var(--icon-brand-secondary-hover);
    stroke: var(--icon-brand-secondary-hover);
    fill: var(--icon-brand-secondary-hover);
}

@utility icon-brand-secondary-pressed {
    color: var(--icon-brand-secondary-pressed);
    stroke: var(--icon-brand-secondary-pressed);
    fill: var(--icon-brand-secondary-pressed);
}

@utility icon-brand-overlay-default {
    color: var(--icon-brand-overlay-default);
    stroke: var(--icon-brand-overlay-default);
    fill: var(--icon-brand-overlay-default);
}

@utility icon-brand-overlay-hover {
    color: var(--icon-brand-overlay-hover);
    stroke: var(--icon-brand-overlay-hover);
    fill: var(--icon-brand-overlay-hover);
}

@utility icon-brand-overlay-pressed {
    color: var(--icon-brand-overlay-pressed);
    stroke: var(--icon-brand-overlay-pressed);
    fill: var(--icon-brand-overlay-pressed);
}

@utility icon-brand-onneutral-default {
    color: var(--icon-brand-onneutral-default);
    stroke: var(--icon-brand-onneutral-default);
    fill: var(--icon-brand-onneutral-default);
}

@utility icon-brand-onneutral-hover {
    color: var(--icon-brand-onneutral-hover);
    stroke: var(--icon-brand-onneutral-hover);
    fill: var(--icon-brand-onneutral-hover);
}

@utility icon-brand-onneutral-pressed {
    color: var(--icon-brand-onneutral-pressed);
    stroke: var(--icon-brand-onneutral-pressed);
    fill: var(--icon-brand-onneutral-pressed);
}

@utility icon-semantic-error-primary-default {
    color: var(--icon-semantic-error-primary-default);
    stroke: var(--icon-semantic-error-primary-default);
    fill: var(--icon-semantic-error-primary-default);
}

@utility icon-semantic-error-primary-hover {
    color: var(--icon-semantic-error-primary-hover);
    stroke: var(--icon-semantic-error-primary-hover);
    fill: var(--icon-semantic-error-primary-hover);
}

@utility icon-semantic-error-primary-pressed {
    color: var(--icon-semantic-error-primary-pressed);
    stroke: var(--icon-semantic-error-primary-pressed);
    fill: var(--icon-semantic-error-primary-pressed);
}

@utility icon-semantic-error-secondary-default {
    color: var(--icon-semantic-error-secondary-default);
    stroke: var(--icon-semantic-error-secondary-default);
    fill: var(--icon-semantic-error-secondary-default);
}

@utility icon-semantic-error-secondary-hover {
    color: var(--icon-semantic-error-secondary-hover);
    stroke: var(--icon-semantic-error-secondary-hover);
    fill: var(--icon-semantic-error-secondary-hover);
}

@utility icon-semantic-error-secondary-pressed {
    color: var(--icon-semantic-error-secondary-pressed);
    stroke: var(--icon-semantic-error-secondary-pressed);
    fill: var(--icon-semantic-error-secondary-pressed);
}

@utility icon-semantic-error-onneutral-default {
    color: var(--icon-semantic-error-onneutral-default);
    stroke: var(--icon-semantic-error-onneutral-default);
    fill: var(--icon-semantic-error-onneutral-default);
}

@utility icon-semantic-error-onneutral-hover {
    color: var(--icon-semantic-error-onneutral-hover);
    stroke: var(--icon-semantic-error-onneutral-hover);
    fill: var(--icon-semantic-error-onneutral-hover);
}

@utility icon-semantic-error-onneutral-pressed {
    color: var(--icon-semantic-error-onneutral-pressed);
    stroke: var(--icon-semantic-error-onneutral-pressed);
    fill: var(--icon-semantic-error-onneutral-pressed);
}

@utility icon-semantic-error-overlay-default {
    color: var(--icon-semantic-error-overlay-default);
    stroke: var(--icon-semantic-error-overlay-default);
    fill: var(--icon-semantic-error-overlay-default);
}

@utility icon-semantic-error-overlay-hover {
    color: var(--icon-semantic-error-overlay-hover);
    stroke: var(--icon-semantic-error-overlay-hover);
    fill: var(--icon-semantic-error-overlay-hover);
}

@utility icon-semantic-error-overlay-pressed {
    color: var(--icon-semantic-error-overlay-pressed);
    stroke: var(--icon-semantic-error-overlay-pressed);
    fill: var(--icon-semantic-error-overlay-pressed);
}

@utility icon-semantic-success-primary-default {
    color: var(--icon-semantic-success-primary-default);
    stroke: var(--icon-semantic-success-primary-default);
    fill: var(--icon-semantic-success-primary-default);
}

@utility icon-semantic-success-primary-hover {
    color: var(--icon-semantic-success-primary-hover);
    stroke: var(--icon-semantic-success-primary-hover);
    fill: var(--icon-semantic-success-primary-hover);
}

@utility icon-semantic-success-primary-pressed {
    color: var(--icon-semantic-success-primary-pressed);
    stroke: var(--icon-semantic-success-primary-pressed);
    fill: var(--icon-semantic-success-primary-pressed);
}   

@utility icon-semantic-success-secondary-default {
    color: var(--icon-semantic-success-secondary-default);
    stroke: var(--icon-semantic-success-secondary-default);
    fill: var(--icon-semantic-success-secondary-default);
}

@utility icon-semantic-success-secondary-hover {
    color: var(--icon-semantic-success-secondary-hover);
    stroke: var(--icon-semantic-success-secondary-hover);
    fill: var(--icon-semantic-success-secondary-hover);
}

@utility icon-semantic-success-secondary-pressed {
    color: var(--icon-semantic-success-secondary-pressed);
    stroke: var(--icon-semantic-success-secondary-pressed);
    fill: var(--icon-semantic-success-secondary-pressed);
}

@utility icon-semantic-success-onneutral-default {
    color: var(--icon-semantic-success-onneutral-default);
    stroke: var(--icon-semantic-success-onneutral-default);
    fill: var(--icon-semantic-success-onneutral-default);
}

@utility icon-semantic-success-onneutral-hover {
    color: var(--icon-semantic-success-onneutral-hover);
    stroke: var(--icon-semantic-success-onneutral-hover);
    fill: var(--icon-semantic-success-onneutral-hover);
}

@utility icon-semantic-success-onneutral-pressed {
    color: var(--icon-semantic-success-onneutral-pressed);
    stroke: var(--icon-semantic-success-onneutral-pressed);
    fill: var(--icon-semantic-success-onneutral-pressed);
}

@utility icon-semantic-success-overlay-default {
    color: var(--icon-semantic-success-overlay-default);
    stroke: var(--icon-semantic-success-overlay-default);
    fill: var(--icon-semantic-success-overlay-default);
}

@utility icon-semantic-success-overlay-hover {
    color: var(--icon-semantic-success-overlay-hover);
    stroke: var(--icon-semantic-success-overlay-hover);
    fill: var(--icon-semantic-success-overlay-hover);
}

@utility icon-semantic-success-overlay-pressed {
    color: var(--icon-semantic-success-overlay-pressed);
    stroke: var(--icon-semantic-success-overlay-pressed);
    fill: var(--icon-semantic-success-overlay-pressed);
}

@utility icon-semantic-warning-primary-default {
    color: var(--icon-semantic-warning-primary-default);
    stroke: var(--icon-semantic-warning-primary-default);
    fill: var(--icon-semantic-warning-primary-default);
}

@utility icon-semantic-warning-primary-hover {
    color: var(--icon-semantic-warning-primary-hover);
    stroke: var(--icon-semantic-warning-primary-hover);
    fill: var(--icon-semantic-warning-primary-hover);
}

@utility icon-semantic-warning-primary-pressed {
    color: var(--icon-semantic-warning-primary-pressed);
    stroke: var(--icon-semantic-warning-primary-pressed);
    fill: var(--icon-semantic-warning-primary-pressed);
}

@utility icon-semantic-warning-secondary-default {
    color: var(--icon-semantic-warning-secondary-default);
    stroke: var(--icon-semantic-warning-secondary-default);
    fill: var(--icon-semantic-warning-secondary-default);
}

@utility icon-semantic-warning-secondary-hover {
    color: var(--icon-semantic-warning-secondary-hover);
    stroke: var(--icon-semantic-warning-secondary-hover);
    fill: var(--icon-semantic-warning-secondary-hover);
}

@utility icon-semantic-warning-secondary-pressed {
    color: var(--icon-semantic-warning-secondary-pressed);
    stroke: var(--icon-semantic-warning-secondary-pressed);
    fill: var(--icon-semantic-warning-secondary-pressed);
}

@utility icon-semantic-warning-onneutral-default {
    color: var(--icon-semantic-warning-onneutral-default);
    stroke: var(--icon-semantic-warning-onneutral-default);
    fill: var(--icon-semantic-warning-onneutral-default);
}

@utility icon-semantic-warning-onneutral-hover {
    color: var(--icon-semantic-warning-onneutral-hover);
    stroke: var(--icon-semantic-warning-onneutral-hover);
    fill: var(--icon-semantic-warning-onneutral-hover);
}

@utility icon-semantic-warning-onneutral-pressed {
    color: var(--icon-semantic-warning-onneutral-pressed);
    stroke: var(--icon-semantic-warning-onneutral-pressed);
    fill: var(--icon-semantic-warning-onneutral-pressed);
}

@utility icon-semantic-warning-overlay-default {
    color: var(--icon-semantic-warning-overlay-default);
    stroke: var(--icon-semantic-warning-overlay-default);
    fill: var(--icon-semantic-warning-overlay-default);
}

@utility icon-semantic-warning-overlay-hover {
    color: var(--icon-semantic-warning-overlay-hover);
    stroke: var(--icon-semantic-warning-overlay-hover);
    fill: var(--icon-semantic-warning-overlay-hover);
}

@utility icon-semantic-warning-overlay-pressed {
    color: var(--icon-semantic-warning-overlay-pressed);
    stroke: var(--icon-semantic-warning-overlay-pressed);
    fill: var(--icon-semantic-warning-overlay-pressed);
}

@utility icon-disabled-default {
    color: var(--icon-disabled-default);
    stroke: var(--icon-disabled-default);
    fill: var(--icon-disabled-default);
}

@utility icon-disabled-ondisabled {
    color: var(--icon-disabled-ondisabled);
    stroke: var(--icon-disabled-ondisabled);
    fill: var(--icon-disabled-ondisabled);
}