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

$table-container: (
    selectors: (
        margin: 0 0.65rem,
    ),
    selector-label: (
        color: var(--clr-black-60),
    ),
    selector-label-hover: (
        color: var(--clr-black-100),
    ),
    selector-counter: (
        color: var(--clr-black-60),
        font-size: 0.875rem,
    ),
    toolbar-mobile: (
        gap: 1rem,
    ),
    toolbar-actions: (
        gap: 1rem,
    ),
    toolbar-actions-last-child: (
        margin-right: 1rem,
    ),
    toolbar-actions-divider: (
        height: 2rem,
        border-left: 1px solid var(--clr-gray-20),
    ),
    toolbar-search: (
        width: 22rem,
    ),
    content: (
        padding: 0,
    ),
    placeholder: (
        width: 100%,
        height: 100vh,
        gap: 1rem,
        icon-size: 3rem,
        title-size: 2rem,
    ),
);

:host {
    width: 100%;
    position: relative;
    display: flex;
    overflow: hidden;

    // initial table container scrollbar styles
    ::-webkit-scrollbar-track:hover {
        border: 1px solid var(--clr-gray-10);
    }
    ::-webkit-scrollbar-thumb {
        background: var(--clr-gray-20);
        border: 3px solid transparent;
        border-radius: 6px;
        background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--clr-black-40);
        border: 2px solid transparent;
        background-clip: content-box;
    }

    // set rt-toolbar styles
    rtui-toolbar {
        --rt-toolbar-body-padding: 0;
        --rt-toolbar-bars-border-bottom-width: 0;
    }

    rtui-scrollable {
        --rt-scrollable-header-padding: 1rem 0 0 0;
        --rt-scrollable-content-padding: 1rem 0 0 0;
        --rt-scrollable-host-background-color: transparent;
        --rt-scrollable-header-background-color: transparent;
        --rt-scrollable-content-background-color: transparent;
    }

    // M3 redefined variables
    --mat-fab-small-container-shape: 50%;
    --mat-fab-small-hover-state-layer-opacity: 0;
    --mat-fab-small-pressed-state-layer-opacity: 0;
    --mat-fab-small-focus-state-layer-opacity: 0;

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

    .table-container {
        &__selectors {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-grow: 1;
            width: 100%;
            margin: var(--rt-table-container-selectors-margin);
            gap: var(--rt-table-container-toolbar-actions-gap);

            &-label {
                color: var(--rt-table-container-selector-label-color);

                &:hover {
                    color: var(--rt-table-container-selector-label-hover-color);
                }
            }

            &-counter {
                font-size: var(--rt-table-container-selector-counter-font-size);
                color: var(--rt-table-container-selector-counter-color);
            }
        }

        &__toolbar {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            &-actions {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: var(--rt-table-container-toolbar-actions-gap);

                > :last-child {
                    margin-right: var(--rt-table-container-toolbar-actions-last-child-margin-right);
                }
            }

            &-actions-divider {
                height: var(--rt-table-container-toolbar-actions-divider-height);
                border-left: var(--rt-table-container-toolbar-actions-divider-border-left);
            }

            &-search {
                width: var(--rt-table-container-toolbar-search-width);
            }
        }

        &__content {
            width: 100%;
            flex-grow: 1;
            overflow: auto;
            padding: var(--rt-table-container-content-padding);

            &::-webkit-scrollbar {
                width: var(--rt-table-container-content-scrollbar-vertical-width);
                height: var(--rt-table-container-content-scrollbar-horizontal-height);
            }
        }

        &__placeholder {
            width: var(--rt-table-container-placeholder-width);
            height: var(--rt-table-container-placeholder-height);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--rt-table-container-placeholder-gap);

            &-icon {
                width: var(--rt-table-container-placeholder-icon-size);
                height: var(--rt-table-container-placeholder-icon-size);
                font-size: var(--rt-table-container-placeholder-icon-size);
            }

            &-title {
                font-size: var(--rt-table-container-placeholder-title-size);
            }
        }
    }

    @include mixins.media-breakpoint-down(vars.$device-sm) {
        --rt-table-container-toolbar-actions-last-child-margin-right: 0;

        rtui-toolbar {
            --rt-toolbar-body-height: 6.5rem;
            --rt-toolbar-body-mobile-height: 6.5rem;
            --rt-toolbar-bars-center-width: 0;
            --rt-toolbar-bars-right-width: 100%;
        }

        .table-container {
            &__toolbar {
                flex-direction: column-reverse;
                gap: var(--rt-table-container-toolbar-mobile-gap);

                &-actions {
                    width: 100%;
                    justify-content: center;

                    &--end {
                        --rt-table-container-toolbar-actions-last-child-margin-right: 1rem;

                        justify-content: flex-end;
                    }
                }

                &-search {
                    width: 100%;
                    grid-row: 1;
                    justify-content: center;
                }
            }
        }
    }
}