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

:root {
    --modal-border-radius: var(--border-radius-24);
    --modal-vertical-padding: var(--gap-40);
    --modal-header-background: var(--color-light-modal-bg-primary);
    --modal-footer-background: var(--color-light-modal-bg-primary);
    --modal-footer-default-gap: var(--gap-16);
    --modal-footer-mobile-default-gap: var(--gap-8);

    /* sizes */
    --modal-s-width: 500px;
    --modal-m-width: 600px;
    --modal-l-width: 800px;
    --modal-xl-width: 1140px;

    /* paddings */
    --modal-s-header-paddings: 28px 28px var(--gap-0);
    --modal-s-content-paddings: var(--gap-40) var(--gap-40) var(--gap-0);
    --modal-s-content-only-bottom-padding: var(--gap-40);
    --modal-s-footer-paddings: var(--gap-24) var(--gap-40) var(--gap-40);

    /* scroll */
    --modal-header-highlight-background: var(--color-light-modal-bg-primary);
    --modal-footer-highlight-background: var(--color-light-modal-bg-primary);
    --modal-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
    --modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);

    /* desktop */
    --modal-s-header-desktop-content-paddings: var(--gap-12);
    --modal-l-header-desktop-content-paddings: var(--gap-6) var(--gap-12) var(--gap-16);

    /* mobile */
    --modal-header-mobile-content-paddings: var(--gap-10) var(--gap-8);

    /* paddings */
    --modal-header-mobile-top-padding: var(--gap-4);
    --modal-header-mobile-paddings: var(--modal-header-mobile-top-padding) var(--gap-12)
        var(--gap-4) var(--gap-12);
}