@use "../../core/jkl";

@layer jokul.components {
    .jkl-table-pagination {
        display: flex;
        gap: var(--jkl-unit-15);
        flex-direction: column;
        width: 100%;

        @include jkl.from-medium-device {
            flex-direction: row;
            gap: var(--jkl-unit-30);
            justify-content: space-between;
            align-items: center;
        }

        &__left {
            flex-shrink: 1;
        }

        &__right {
            flex-grow: 1;
            display: flex;
            flex-wrap: nowrap;
        }

        &__total-rows {
            white-space: nowrap;
        }

        &__picker {
            display: flex;
            flex-direction: row;
            align-items: center;
            white-space: nowrap;

            &--page {
                padding-inline-end: var(--jkl-unit-30);
                width: min(12rem, 100%);

                @include jkl.from-medium-device {
                    justify-content: flex-end;
                }
            }

            &--page &-input {
                width: min(4rem, 100%);
            }
        }

        &__picker-label {
            margin-inline-end: var(--jkl-unit-10);
        }

        &__nav {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-wrap: wrap;
            gap: jkl.$unit-20;

            @include jkl.from-medium-device {
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
            }

            ul {
                list-style: none;
                display: flex;
                flex-wrap: nowrap;
                margin: 0;
                padding: 0;
            }

            li {
                margin: 0;
                padding: 0;
            }
        }

        $_button-size: jkl.rem(32px);

        &__previous,
        &__next,
        &__page {
            background: transparent;
            color: var(--jkl-link-color);
            border-radius: jkl.rem(3px);
            cursor: pointer;
            user-select: none;
            padding: 0;
            height: $_button-size;
            min-width: $_button-size;

            @include jkl.reset-outline;

            &:hover:not(:focus) {
                color: var(--jkl-link-hover-color);
            }

            html:not([data-mousenavigation]) &:focus {
                outline: jkl.rem(2px) solid var(--jkl-link-active-color);
                // outline-offset: jkl.rem(2px);
            }
        }

        &__previous,
        &__next {
            padding-top: jkl.rem(2px);
        }

        &__ellipsis {
            text-align: center;
            vertical-align: bottom;
            display: inline-block;
            height: $_button-size;
            width: $_button-size;
        }

        &__page {
            &--active {
                @include jkl.no-grow-bold;
            }
        }
    }
}