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

$scrollable: (
    host: (
        height: 100%,
        width: 100%,
        display: flex,
        flex-direction: column,
        background-color: var(--clr-white-100),
    ),
    header: (
        padding: 0.5rem 1rem,
        background-color: var(--clr-white-100),
    ),
    content: (
        display: flex,
        flex-direction: column,
        flex-grow: 1,
        padding: 1rem,
        background-color: var(--clr-white-100),
    ),
    footer: (
        padding: 1rem,
        background-color: var(--clr-white-100),
    ),
);

:host {
    height: var(--rt-scrollable-host-height);
    width: var(--rt-scrollable-host-width);

    display: var(--rt-scrollable-host-display);
    flex-direction: var(--rt-scrollable-host-flex-direction);

    background-color: var(--rt-scrollable-host-background-color);

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

    .rtui-scrollable {
        &__header {
            padding: var(--rt-scrollable-header-padding);
            background-color: var(--rt-scrollable-header-background-color);
        }

        &__content {
            display: var(--rt-scrollable-content-display);
            flex-direction: var(--rt-scrollable-content-flex-direction);
            flex-grow: var(--rt-scrollable-content-flex-grow);
            padding: var(--rt-scrollable-content-padding);
            background-color: var(--rt-scrollable-content-background-color);
            overflow: auto;
        }

        &__footer {
            padding: var(--rt-scrollable-footer-padding);
            background-color: var(--rt-scrollable-footer-background-color);
        }
    }
}