@use '../base/mixin' as mixins;
@use '../base/variables' as vars;

$action-bar: (
    container: (
        width: 100%,
        z-index: 1000,
        top: auto,
        bottom: 3.75rem,
        left: auto,
        right: auto,
    ),
    bar: (
        width: fit-content,
        gap: 0.75rem,
        padding: 0.5rem 1rem,
        border-radius: 0.5rem,
        color: var(--clr-white-100),
        background-color: var(--clr-black-100),
        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
    ),
    bar-mobile: (
        gap: 0.5rem,
        padding: 0.25rem 0.75rem,
    ),
    counter: (
        font-size: 1rem,
        font-weight: 600,
    ),
    actions: (
        gap: 0.5rem,
    ),
    actions-mobile: (
        gap: 0.25rem,
    ),
    action: (
        gap: 0.5rem,
        font-size: 1rem,
        font-weight: 600,
        padding: 0.625rem 1rem,
        border-radius: 0.25rem,
    ),
    action-mobile: (
        gap: 0.25rem,
        padding: 0.325rem 0.5rem,
    ),
    action-hover: (
        background-color: var(--clr-black-80),
    ),
    action-menu: (
        gap: 0.5rem,
        padding: 0.5rem,
        border-radius: 0.5rem,
        color: var(--clr-black-100),
        background-color: var(--clr-white-100),
        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
    ),
    action-menu-mobile: (
        gap: 0.25rem,
        padding: 0.25rem,
    ),
    action-menu-action: (
        gap: 0.5rem,
        padding: 0.625rem 1rem,
        font-size: 1rem,
        font-weight: 600,
        border-radius: 0.25rem,
    ),
    action-menu-action-mobile: (
        gap: 0.25rem,
        padding: 0.325rem 0.5rem,
    ),
    action-menu-action-hover: (
        background-color: var(--clr-black-40),
    ),
);

:root {
    @each $element, $elements in $action-bar {
        @each $style-token, $value in $elements {
            #{mixins.generateCssVar('action-bar', #{$element}, #{$style-token})}: #{$value};
        }
    }
}