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

$toolbar: (
    body: (
        height: 3rem,
        padding: 0 1rem,
        background-color: transparent,
    ),
    body-mobile: (
        height: 3rem,
    ),
    bars: (
        border-bottom-style: solid,
        border-bottom-width: 1px,
        border-bottom-color: var(--clr-black-20),
    ),
    bars-left: (
        width: fit-content,
    ),
    bars-center: (
        width: 100%,
    ),
    bars-right: (
        width: fit-content,
    ),
);

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

    // hide mat tab group border bottom styles
    --mat-tab-header-divider-height: 0;

    .toolbar {
        --mat-toolbar-standard-height: var(--rt-toolbar-body-mobile-height);
        --mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-mobile-height);

        min-height: var(--rt-toolbar-body-mobile-height);
        height: var(--rt-toolbar-body-mobile-height);

        padding: var(--rt-toolbar-body-padding);
        background-color: transparent;

        &--sticky {
            position: sticky;
            top: 0;
        }

        @include mixins.media-breakpoint-up(vars.$device-sm) {
            --mat-toolbar-standard-height: var(--rt-toolbar-body-height);
            --mdc-secondary-navigation-tab-container-height: var(--rt-toolbar-body-height);

            height: var(--rt-toolbar-body-height);
            min-height: var(--rt-toolbar-body-height);
        }

        .bars {
            position: relative;

            display: flex;
            width: 100%;
            height: 100%;

            background-color: var(--rt-toolbar-body-background-color);

            border-bottom-style: var(--rt-toolbar-bars-border-bottom-style);
            border-bottom-width: var(--rt-toolbar-bars-border-bottom-width);
            border-bottom-color: var(--rt-toolbar-bars-border-bottom-color);

            &__bar {
                &--left {
                    width: var(--rt-toolbar-bars-left-width);
                }

                &--center {
                    width: var(--rt-toolbar-bars-center-width);
                    overflow: hidden;
                }

                &--right {
                    width: var(--rt-toolbar-bars-right-width);
                }

                &--left,
                &--center,
                &--right {
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
}