//
// Read from Alma Career CCM public theming API and assign to private theming layer.
//
// `--lmcccm-p-*` (`p` for private) are internally used custom properties that either obtain
// corresponding `--lmcccm-*` custom property from public API, or default to a specified Spirit
// design token (or other value if no design token is applicable).
//
// By using Spirit design tokens, all Spirit-based projects benefit from plug-and-play setup.

@use 'sass:map';
@use '@tokens' as tokens;
@use '../tools/units';

:root {
    // Common
    --lmcccm-p-font-family: var(
        --lmcccm-font-family,
        #{map.get(tokens.$body-medium-text-regular, 'mobile', 'font-family')}
    );
    --lmcccm-p-base-font-size: var(
        --lmcccm-base-font-size,
        #{units.convert2em(map.get(tokens.$body-medium-text-regular, 'mobile', 'font-size'))}
    );
    --lmcccm-p-bg: var(--lmcccm-bg, #{tokens.$background-basic});
    --lmcccm-p-text: var(--lmcccm-text, #{tokens.$text-primary-default});
    --lmcccm-p-backdrop-color: var(--lmcccm-backdrop-color, #{tokens.$background-backdrop});

    // Links
    --lmcccm-p-link-text: var(--lmcccm-link-text, #{tokens.$action-link-primary-default});
    --lmcccm-p-link-text-decoration: var(--lmcccm-link-text-decoration, underline);
    --lmcccm-p-link-hover-text: var(--lmcccm-link-hover-text, #{tokens.$action-link-primary-hover});
    --lmcccm-p-link-hover-text-decoration: var(--lmcccm-link-hover-text-decoration, underline);
    --lmcccm-p-link-active-text: var(--lmcccm-link-active-text, #{tokens.$action-link-primary-active});

    // Buttons
    --lmcccm-p-btn-font-weight: var(
        --lmcccm-btn-font-weight,
        #{map.get(tokens.$body-medium-text-bold, 'mobile', 'font-weight')}
    );
    --lmcccm-p-btn-text-transform: var(--lmcccm-btn-text-transform, initial);
    --lmcccm-p-btn-border-width: var(--lmcccm-btn-border-width, #{tokens.$border-width-100});
    --lmcccm-p-btn-border-style: var(--lmcccm-btn-border-style, #{tokens.$border-style-100});
    --lmcccm-p-btn-border-radius: var(--lmcccm-btn-border-radius, #{units.convert2em(tokens.$radius-100)});
    --lmcccm-p-btn-primary-border: var(--lmcccm-btn-primary-border, #{tokens.$action-primary-default});
    --lmcccm-p-btn-primary-bg: var(--lmcccm-btn-primary-bg, #{tokens.$action-primary-default});
    --lmcccm-p-btn-primary-text: var(--lmcccm-btn-primary-text, #{tokens.$text-primary-inverted-default});
    --lmcccm-p-btn-primary-hover-border: var(--lmcccm-btn-primary-hover-border, #{tokens.$action-primary-hover});
    --lmcccm-p-btn-primary-hover-bg: var(--lmcccm-btn-primary-hover-bg, #{tokens.$action-primary-hover});
    --lmcccm-p-btn-primary-hover-text: var(--lmcccm-btn-primary-hover-text, #{tokens.$text-primary-inverted-default});
    --lmcccm-p-btn-primary-active-border: var(--lmcccm-btn-primary-active-border, #{tokens.$action-primary-active});
    --lmcccm-p-btn-primary-active-bg: var(--lmcccm-btn-primary-active-bg, #{tokens.$action-primary-active});
    --lmcccm-p-btn-primary-active-text: var(--lmcccm-btn-primary-active-text, #{tokens.$text-primary-inverted-default});
    --lmcccm-p-btn-secondary-border: var(--lmcccm-btn-secondary-border, #{tokens.$action-secondary-default});
    --lmcccm-p-btn-secondary-bg: var(--lmcccm-btn-secondary-bg, #{tokens.$background-interactive-default});
    --lmcccm-p-btn-secondary-text: var(--lmcccm-btn-secondary-text, #{tokens.$text-primary-default});
    --lmcccm-p-btn-secondary-hover-border: var(--lmcccm-btn-secondary-hover-border, #{tokens.$action-secondary-hover});
    --lmcccm-p-btn-secondary-hover-bg: var(--lmcccm-btn-secondary-hover-bg, #{tokens.$background-interactive-hover});
    --lmcccm-p-btn-secondary-hover-text: var(--lmcccm-btn-secondary-hover-text, #{tokens.$text-primary-default});
    --lmcccm-p-btn-secondary-active-border: var(
        --lmcccm-btn-secondary-active-border,
        #{tokens.$action-secondary-active}
    );
    --lmcccm-p-btn-secondary-active-bg: var(--lmcccm-btn-secondary-active-bg, #{tokens.$background-interactive-active});
    --lmcccm-p-btn-secondary-active-text: var(--lmcccm-btn-secondary-active-text, #{tokens.$text-primary-default});

    // Toggle
    --lmcccm-p-toggle-bg-off: var(--lmcccm-toggle-bg-off, #{tokens.$action-unselected-default});
    --lmcccm-p-toggle-bg-on: var(--lmcccm-toggle-bg-on, #{tokens.$action-selected-default});
    --lmcccm-p-toggle-bg-readonly: var(--lmcccm-toggle-bg-readonly, #{tokens.$action-primary-disabled});
    --lmcccm-p-toggle-knob-bg: var(--lmcccm-toggle-knob-bg, #{tokens.$background-basic});
    --lmcccm-p-toggle-knob-icon-color: var(--lmcccm-toggle-knob-icon-color, #{tokens.$background-basic});

    // Modal
    --lmcccm-p-modal-max-width: var(
        --lmcccm-modal-max-width,
        min(50em, calc(100vw - #{units.convert2em(tokens.$space-800)}))
    );
    --lmcccm-p-modal-max-height: var(--lmcccm-modal-max-height, 38.5em);
    --lmcccm-p-modal-border-radius: var(--lmcccm-modal-border-radius, #{units.convert2em(tokens.$radius-200)});
    --lmcccm-p-modal-bg: var(--lmcccm-modal-bg, var(--lmcccm-p-bg));
    --lmcccm-p-modal-text: var(--lmcccm-modal-text, var(--lmcccm-p-text));
    --lmcccm-p-modal-section-border: var(--lmcccm-modal-section-border, #{tokens.$border-primary-default});

    // Cookies
    --lmcccm-p-cookie-category-border-radius: var(
        --lmcccm-cookie-category-border-radius,
        #{units.convert2em(tokens.$radius-100)}
    );
    --lmcccm-p-cookie-category-bg: var(--lmcccm-cookie-category-bg, #{tokens.$background-cover});
    --lmcccm-p-cookie-category-hover-bg: var(--lmcccm-cookie-category-hover-bg, #{tokens.$background-cover});
    --lmcccm-p-cookie-table-border: var(--lmcccm-cookie-table-border, #{tokens.$border-primary-default});
}