@import '../../helpers/_selectors.scss';
@import '../core/theme.scss';

/* PAGINATION */
/* Parent contianer for page navigation */
.pagination {
    display: flex;
    display: -ms-flexbox;

    /* Use for the major pagination meant to display about 2 items */
    .pagination-item {
        -webkit-flex: 1 0 50%; /* Flex to fill */
        -ms-flex: 1 0 50%;
        flex: 1 0 50%;
        margin: 1rem 0.1rem;
        transition: all 0.3s;

        &:hover {
            p,
            #{$header-selectors} {
                transition: all 0.3s;
                color: var(--cirrus-primary);
            }
        }

        &:not(.selected):hover *:not([disabled]):not(.disabled):not(.ellipses) {
            transition: all 0.3s;
            color: var(--cirrus-primary);
        }

        &.pagination-next {
            text-align: right;
        }

        &.pagination-prev {
            text-align: left;
        }

        a {
            color: map-get($grays, '700');

            &[disabled],
            &.disabled {
                cursor: pointer;
                opacity: 0.5;
                pointer-events: none;
                user-select: none;
            }
        }

        /* Pagination Item */
        .pagination-item-subtitle {
            opacity: 0.7;
            margin: 0; /* Needed to override style after formatting paragraph update */
        }

        /* Used to display many pagination items */
        &.short {
            border-radius: 0.1rem;
            margin: 0.2rem 0;
            -webkit-flex: 0; /* Flex to fill */
            -ms-flex: 0;
            flex: 0;

            &:first-child a {
                border-top-left-radius: 0.25rem;
                border-bottom-left-radius: 0.25rem;
            }

            &:last-child a {
                border-top-right-radius: 0.25rem;
                border-bottom-right-radius: 0.25rem;
            }

            &:not([disabled]):not(.disabled):not(.selected):hover {
                background-color: rgba(0, 0, 0, 0.07);
            }

            /* Color the selected pagination item with accent color */
            &.selected {
                background-color: var(--cirrus-primary);
                color: #fff;
                a {
                    color: #fff;
                }
            }

            &.ellipses {
                color: map-get($grays, '500');
                pointer-events: none;
            }

            a {
                display: inline-block;
                line-height: 1.25;
                padding: 0.5rem 0.75rem;
            }
        }
    }

    /* Bordered pagination */
    &.pagination-bordered .pagination-item.short a {
        border: 1px solid map-get($grays, '300');
        border-radius: 0;
        margin-left: -1px;
    }
}