.pagination-container {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: $pagination-vertical-margin;

    &.loading-view {
        .spinner {
            display: block;
            margin-top: 30px;
        }

        .items-per-page,
        .pagination {
            opacity: 0.4;
            pointer-events: none;
        }
    }

    .items-per-page {
        margin: $pagination-vertical-margin $header-padding 0 $header-padding;
    }

    .pagination {
        margin: $pagination-vertical-margin calc(#{$header-padding} - 5px) 0 calc(#{$header-padding} - 5px);
    }

    .pagination .pagination-icon {
        vertical-align: -2px;
    }

    .spinner {
        display: none;
    }

    .change-page-link {
        padding: 0;
        color: var(--deprecated-medium-blue);
        font-size: var(--default-font-size);
        background-color: var(--white);
        border: none;
        cursor: pointer;

        .icon {
            fill: var(--deprecated-medium-blue);
        }

        &.disabled {
            color: var(--deprecated-medium-grey);
            cursor: default;
            pointer-events: none;

            .icon {
                fill: var(--deprecated-medium-grey);
            }
        }
    }

    .flat-select .flat-select-option {
        color: var(--white);
        background-color: var(--digital-blue-60);
        border: 1px solid var(--digital-blue-60);

        &.selectable {
            color: var(--digital-blue-80);
            background-color: var(--white);
            border: $default-border;
        }

        &.mod-link {
            color: var(--digital-blue-80);
            background-color: var(--white);
            border: none;

            .icon {
                fill: currentcolor;
            }

            &.disabled {
                color: var(--deprecated-medium-grey);
                cursor: default;
                pointer-events: none;

                .icon {
                    fill: var(--deprecated-medium-grey);
                }
            }
        }
    }
}

.modal,
.modal-container .modal-body {
    .pagination-container {
        .items-per-page,
        .pagination {
            margin: $pagination-vertical-margin -5px 0 0;
        }
    }
}