@import "shared/mixins-and-vars";

.pagination {
    &__inactive {
        display: none !important;
    }

    &__pager {
        /*
         * This is used by the script to determine what the
         * max width is for the mobile breakpoint.
         */
        --mobile-mq: @mobile;
        padding: 10px 0px;
        .width-fit-content();
        margin: 0 auto;
    }

    &__pager-item {
        .appearance(none);
        position: relative;
        padding: 10px;
        border: none;
        border-bottom: solid 3px transparent;
        text-align: center;
        display: inline-block;
        cursor: pointer;
        background-color: #fff;
        width: 3em;
        font-size: (14 / @px);

        .enable__is-dark-mode & {
            color: @dark-mode-white;
            background-color: transparent;
        }

        &:hover {
            background-color: #0e384c;
            color: white;
        }

        &:focus {
            z-index: 1;
        }

        &--selected {
            border-bottom: solid #00f 3px;
            color: #00f;
            font-weight: bold;

            .enable__is-dark-mode & {
                border-bottom: solid rgb(126, 126, 248) 3px;
                color: rgb(126, 126, 248);
            }
        }
    }

    &__table {
        margin-bottom: 0;
    }
}