@import '@alfalab/core-components-vars/src/index.css';

:root {
    /* border-radius desktop */
    --button-xxs-size-border-radius: var(--border-radius-8);
    --button-xs-size-border-radius: var(--border-radius-10);
    --button-s-size-border-radius: var(--border-radius-10);
    --button-m-size-border-radius: var(--border-radius-12);
    --button-l-size-border-radius: var(--border-radius-14);
    --button-xl-size-border-radius: var(--border-radius-14);

    /* primary */
    --button-primary-base-bg-color: var(--color-light-accent-secondary);
    --button-primary-hover-bg-color: var(--color-light-accent-secondary-hover);
    --button-primary-active-bg-color: var(--color-light-accent-secondary-press);
    --button-primary-disabled-bg-color: var(--color-light-neutral-translucent-100);
    --button-primary-color: var(--color-light-text-primary-inverted);
    --button-primary-disabled-color: var(--color-light-text-tertiary);
    --button-primary-hint-color: var(--color-light-text-secondary-inverted);

    /* accent */
    --button-accent-base-bg-color: var(--color-light-accent-primary);
    --button-accent-hover-bg-color: var(--color-light-accent-primary-hover);
    --button-accent-active-bg-color: var(--color-light-accent-primary-press);
    --button-accent-disabled-bg-color: var(--color-light-neutral-translucent-100);
    --button-accent-color: var(--color-static-text-primary-inverted);
    --button-accent-disabled-color: var(--color-light-text-tertiary);

    /* secondary */
    --button-secondary-base-bg-color: var(--color-light-neutral-translucent-300);
    --button-secondary-hover-bg-color: var(--color-light-neutral-translucent-300-hover);
    --button-secondary-active-bg-color: var(--color-light-neutral-translucent-300-press);
    --button-secondary-disabled-bg-color: var(--color-light-neutral-translucent-100);
    --button-secondary-base-border-color: transparent;
    --button-secondary-disabled-border-color: transparent;
    --button-secondary-color: var(--color-light-text-primary);
    --button-secondary-hint-color: var(--color-light-text-secondary);
    --button-secondary-disabled-color: var(--color-light-text-tertiary);

    /* outlined */
    --button-outlined-base-bg-color: var(--color-light-transparent-default);
    --button-outlined-hover-bg-color: var(--color-light-transparent-default-hover);
    --button-outlined-active-bg-color: var(--color-light-transparent-default-press);
    --button-outlined-hover-border-color: var(--color-light-neutral-translucent-1300);
    --button-outlined-disabled-bg-color: var(--color-light-transparent-default);
    --button-outlined-base-border-color: var(--color-light-neutral-translucent-1300);
    --button-outlined-disabled-border-color: var(--color-light-neutral-translucent-500);
    --button-outlined-color: var(--color-light-text-primary);
    --button-outlined-hint-color: var(--color-light-text-secondary);
    --button-outlined-disabled-color: var(--color-light-text-tertiary);

    /* text */
    --button-text-base-color: var(--color-light-text-primary);
    --button-text-base-hint-color: var(--color-light-text-secondary);
    --button-text-hover-color: var(--color-light-text-primary-hover);
    --button-text-active-color: var(--color-light-text-primary-press);
    --button-text-disabled-color: var(--color-light-text-tertiary);

    /* transparent */
    --button-transparent-base-color: var(--color-light-text-primary);
    --button-transparent-base-hint-color: var(--color-light-text-secondary);
    --button-transparent-hover-bg-color: var(--color-light-transparent-default-hover);
    --button-transparent-active-bg-color: var(--color-light-transparent-default-press);
    --button-transparent-disabled-color: var(--color-light-text-tertiary);

    /* loader */
    --button-spinner-static-color: var(--color-static-neutral-translucent-1300-inverted);
    --button-spinner-primary-color: var(--color-light-neutral-translucent-1300-inverted);
    --button-spinner-default-color: var(--color-light-neutral-translucent-1300);

    /* primary inverted */
    --button-inverted-primary-base-bg-color: var(--color-light-accent-secondary-inverted);
    --button-inverted-primary-hover-bg-color: var(--color-light-accent-secondary-inverted-hover);
    --button-inverted-primary-active-bg-color: var(--color-light-accent-secondary-inverted-press);
    --button-inverted-primary-disabled-bg-color: var(
        --color-light-neutral-translucent-100-inverted
    );
    --button-inverted-primary-disabled-color: var(--color-light-text-tertiary-inverted);
    --button-inverted-primary-color: var(--color-light-text-primary);
    --button-inverted-primary-hint-color: var(--color-light-text-secondary);

    /* accent inverted */
    --button-inverted-accent-base-bg-color: var(--color-light-accent-primary-inverted);
    --button-inverted-accent-hover-bg-color: var(--color-light-accent-primary-inverted-hover);
    --button-inverted-accent-active-bg-color: var(--color-light-accent-primary-inverted-press);
    --button-inverted-accent-disabled-bg-color: var(--color-light-neutral-translucent-100-inverted);
    --button-inverted-accent-disabled-color: var(--color-light-text-tertiary-inverted);
    --button-inverted-accent-color: var(--color-static-text-primary-inverted);

    /* secondary inverted */
    --button-inverted-secondary-base-bg-color: var(--color-light-neutral-translucent-300-inverted);
    --button-inverted-secondary-hover-bg-color: var(
        --color-light-neutral-translucent-300-inverted-hover
    );
    --button-inverted-secondary-active-bg-color: var(
        --color-light-neutral-translucent-300-inverted-press
    );
    --button-inverted-secondary-disabled-bg-color: var(
        --color-light-neutral-translucent-100-inverted
    );
    --button-inverted-secondary-base-border-color: transparent;
    --button-inverted-secondary-disabled-border-color: transparent;
    --button-inverted-secondary-color: var(--color-light-text-primary-inverted);
    --button-inverted-secondary-hint-color: var(--color-light-text-secondary-inverted);
    --button-inverted-secondary-disabled-color: var(--color-light-text-tertiary-inverted);

    /* outlined inverted */
    --button-inverted-outlined-base-bg-color: var(--color-light-transparent-default);
    --button-inverted-outlined-hover-bg-color: var(
        --color-light-transparent-default-inverted-hover
    );
    --button-inverted-outlined-active-bg-color: var(
        --color-light-transparent-default-inverted-press
    );
    --button-inverted-outlined-hover-border-color: var(
        --color-light-neutral-translucent-1300-inverted
    );
    --button-inverted-outlined-disabled-bg-color: var(--color-light-transparent-default);
    --button-inverted-outlined-base-border-color: var(
        --color-light-neutral-translucent-1300-inverted
    );
    --button-inverted-outlined-disabled-border-color: var(
        --color-light-neutral-translucent-500-inverted
    );
    --button-inverted-outlined-color: var(--color-light-text-primary-inverted);
    --button-inverted-outlined-hint-color: var(--color-light-text-secondary-inverted);
    --button-inverted-outlined-disabled-color: var(--color-light-text-tertiary-inverted);

    /* text inverted */
    --button-inverted-text-base-color: var(--color-light-text-primary-inverted);
    --button-inverted-text-base-hint-color: var(--color-light-text-secondary-inverted);
    --button-inverted-text-hover-color: var(--color-light-text-primary-inverted-hover);
    --button-inverted-text-active-color: var(--color-light-text-primary-inverted-press);
    --button-inverted-text-disabled-color: var(--color-light-text-tertiary-inverted);

    /* transparent inverted */
    --button-inverted-transparent-base-color: var(--color-light-text-primary-inverted);
    --button-inverted-transparent-base-hint-color: var(--color-light-text-secondary-inverted);
    --button-inverted-transparent-hover-bg-color: var(
        --color-light-transparent-default-inverted-hover
    );
    --button-inverted-transparent-active-bg-color: var(
        --color-light-transparent-default-inverted-press
    );
    --button-inverted-transparent-disabled-color: var(--color-light-text-tertiary-inverted);

    /* loader inverted */
    --button-spinner-inverted-static-color: var(--color-static-neutral-translucent-1300-inverted);
    --button-spinner-inverted-color: var(--color-light-neutral-translucent-1300-inverted);
    --button-spinner-inverted-primary-color: var(--color-light-neutral-translucent-1300);

    /* border-radius mobile */
    --button-xxs-size-mobile-border-radius: var(--border-radius-8);
    --button-xs-size-mobile-border-radius: var(--border-radius-12);
    --button-s-size-mobile-border-radius: var(--border-radius-12);
    --button-m-size-mobile-border-radius: var(--border-radius-16);
    --button-l-size-mobile-border-radius: var(--border-radius-16);
    --button-xl-size-mobile-border-radius: var(--border-radius-16);

    /* primary mobile */
    --button-primary-mobile-base-bg-color: var(--color-light-accent-secondary);
    --button-primary-mobile-hover-bg-color: var(--color-light-accent-secondary-hover);
    --button-primary-mobile-active-bg-color: var(--color-light-accent-secondary-press);
    --button-primary-mobile-color: var(--color-light-text-primary-inverted);
    --button-primary-mobile-disabled-color: var(--color-light-text-tertiary);
    --button-primary-mobile-disabled-bg-color: var(--color-light-neutral-translucent-100);

    /* primary inverted mobile */
    --button-inverted-primary-mobile-base-bg-color: var(--color-light-accent-secondary-inverted);
    --button-inverted-primary-mobile-hover-bg-color: var(
        --color-light-accent-secondary-inverted-hover
    );
    --button-inverted-primary-mobile-active-bg-color: var(
        --color-light-accent-secondary-inverted-press
    );
    --button-inverted-primary-mobile-color: var(--color-light-text-primary);
    --button-inverted-primary-mobile-disabled-bg-color: var(
        --color-light-neutral-translucent-100-inverted
    );
    --button-inverted-primary-mobile-disabled-color: var(--color-light-text-tertiary-inverted);

    /* secondary mobile */
    --button-secondary-mobile-base-bg-color: var(--color-light-neutral-translucent-100);
    --button-secondary-mobile-active-bg-color: var(--color-light-neutral-translucent-100-press);
    --button-secondary-mobile-disabled-bg-color: var(--color-light-neutral-translucent-100);
    --button-secondary-mobile-disabled-color: var(--color-light-text-tertiary);

    /* secondary inverted mobile */
    --button-inverted-secondary-mobile-base-bg-color: var(
        --color-light-neutral-translucent-100-inverted
    );
    --button-inverted-secondary-mobile-active-bg-color: var(
        --color-light-neutral-translucent-100-inverted-press
    );
    --button-inverted-secondary-mobile-disabled-bg-color: var(
        --color-light-neutral-translucent-100-inverted
    );
    --button-inverted-secondary-mobile-disabled-color: var(--color-light-text-tertiary-inverted);

    /* outlined mobile */
    --button-outlined-mobile-disabled-border-color: var(--color-light-neutral-translucent-500);
    --button-outlined-mobile-disabled-color: var(--color-light-text-tertiary);

    /* outlined inverted mobile */
    --button-inverted-outlined-mobile-disabled-border-color: var(
        --color-light-neutral-translucent-500-inverted
    );
    --button-inverted-outlined-mobile-disabled-color: var(--color-light-text-tertiary-inverted);

    /* transparent mobile */
    --button-transparent-mobile-disabled-color: var(--color-light-text-tertiary);

    /* transparent inverted mobile */
    --button-inverted-transparent-mobile-disabled-color: var(--color-light-text-tertiary-inverted);

    /* text mobile */
    --button-text-mobile-active-color: var(--color-light-text-primary-press);
    --button-text-mobile-disabled-color: var(--color-light-text-tertiary);

    /* text mobile inverted */
    --button-inverted-text-mobile-active-color: var(--color-light-text-primary-inverted-press);
    --button-inverted-text-mobile-disabled-color: var(--color-light-text-tertiary-inverted);

    /* loader mobile */
    --button-spinner-primary-mobile-color: var(--color-light-neutral-translucent-1300-inverted);
    --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-translucent-1300);

    /* hint */
    --button-accent-hint-color: currentColor;
    --button-inverted-accent-hint-color: currentColor;
    --button-mobile-primary-hint-color: var(--button-primary-hint-color);
    --button-mobile-inverted-primary-hint-color: var(--button-inverted-primary-hint-color);
    --button-mobile-accent-hint-color: var(--button-accent-hint-color);
    --button-mobile-inverted-accent-hint-color: var(--button-inverted-accent-hint-color);
}