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

@utility radius-none {
    border-radius: var(--radius-none);
}

@utility radius-xsmall {
    border-radius: var(--radius-xsmall);
}

@utility radius-small {
    border-radius: var(--radius-small);
}

@utility radius-medium {
    border-radius: var(--radius-medium);
}

@utility radius-large {
    border-radius: var(--radius-large);
}

@utility radius-xlarge {
    border-radius: var(--radius-xlarge);
}

@utility radius-2xlarge {
    border-radius: var(--radius-2xlarge);
}

@utility radius-full {
    border-radius: var(--radius-pill);
}


/* spacing  */

@utility spacing-0 {
    gap: var(--pyrion-spacing-0);
}

@utility spacing-x-0 {
    column-gap: var(--pyrion-spacing-0);
}

@utility spacing-y-0 {
    row-gap: var(--pyrion-spacing-0);
}

@utility spacing-1 {
    gap: var(--pyrion-spacing-1);
}

@utility spacing-x-1 {
    column-gap: var(--pyrion-spacing-1);
}

@utility spacing-y-1 {
    row-gap: var(--pyrion-spacing-1);
}

@utility spacing-2 {
    gap: var(--pyrion-spacing-2);
}

@utility spacing-x-2 {
    column-gap: var(--pyrion-spacing-2);
}

@utility spacing-y-2 {
    row-gap: var(--pyrion-spacing-2);
}

@utility spacing-4 {
    gap: var(--pyrion-spacing-4);
}

@utility spacing-x-4 {
    column-gap: var(--pyrion-spacing-4);
}

@utility spacing-y-4 {
    row-gap: var(--pyrion-spacing-4);
}

@utility spacing-6 {
    gap: var(--pyrion-spacing-6);
}

@utility spacing-x-6 {
    column-gap: var(--pyrion-spacing-6);
}

@utility spacing-y-6 {
    row-gap: var(--pyrion-spacing-6);
}

@utility spacing-8 {
    gap: var(--pyrion-spacing-8);
}

@utility spacing-x-8 {
    column-gap: var(--pyrion-spacing-8);
}

@utility spacing-y-8 {
    row-gap: var(--pyrion-spacing-8);
}

@utility spacing-10 {
    gap: var(--pyrion-spacing-10);
}

@utility spacing-x-10 {
    column-gap: var(--pyrion-spacing-10);
}

@utility spacing-y-10 {
    row-gap: var(--pyrion-spacing-10);
}

@utility spacing-12 { 
    gap: var(--pyrion-spacing-12);
}

@utility spacing-x-12 {
    column-gap: var(--pyrion-spacing-12);
}

@utility spacing-y-12 {
    row-gap: var(--pyrion-spacing-12);
}

@utility spacing-14 {
    gap: var(--pyrion-spacing-14);
}

@utility spacing-x-14 {
    column-gap: var(--pyrion-spacing-14);
}

@utility spacing-y-14 {
    row-gap: var(--pyrion-spacing-14);
}

@utility spacing-16 {
    gap: var(--pyrion-spacing-16);
}

@utility spacing-x-16 {
    column-gap: var(--pyrion-spacing-16);
}

@utility spacing-y-16 {
    row-gap: var(--pyrion-spacing-16);
}

@utility spacing-18 {
    gap: var(--pyrion-spacing-18);
}

@utility spacing-x-18 {
    column-gap: var(--pyrion-spacing-18);
}

@utility spacing-y-18 {
    row-gap: var(--pyrion-spacing-18);
}

@utility spacing-20 {
    gap: var(--pyrion-spacing-20);
}

@utility spacing-x-20 {
    column-gap: var(--pyrion-spacing-20);
}

@utility spacing-y-20 {
    row-gap: var(--pyrion-spacing-20);
}

@utility spacing-24 {
    gap: var(--pyrion-spacing-24);
}

@utility spacing-x-24 {
    column-gap: var(--pyrion-spacing-24);
}

@utility spacing-y-24 {
    row-gap: var(--pyrion-spacing-24);
}

@utility spacing-28 {
    gap: var(--pyrion-spacing-28);
}

@utility spacing-x-28 {
    column-gap: var(--pyrion-spacing-28);
}

@utility spacing-y-28 {
    row-gap: var(--pyrion-spacing-28);
}

@utility spacing-32 {
    gap: var(--pyrion-spacing-32);
}

@utility spacing-x-32 {
    column-gap: var(--pyrion-spacing-32);
}

@utility spacing-y-32 {
    row-gap: var(--pyrion-spacing-32);
}

@utility aspect-golden { 
    aspect-ratio: 1.61803398875;
}

@utility aspect-golden-inverse {
    aspect-ratio: 0.61803398875;
}