@import '../../style_config/config.scss';

.JDpagination {
    display: flex;
    justify-content:inherit;
    
    // ⭐ Modifiers ️
    &-wrap {
        &--text-large {
            font-size: $typho-large;
        }
        &--align-center {
            justify-content: center;
        }
        &--prev-hidden {
            .JDpagination__btn-prev {
                display: none;
            }  
        }
    }

    & > li {
        margin: 0 $pagination-li-margin;
        border-radius: $pagination-li-radius;

        //  👍 a태그 눌러야 페이지 리턴이 발동함
        a {
            display:inline-block;
            height: $pagination-li-height;
            line-height: $pagination-li-height;
            padding: 0 $pagination-li-padding;
            background-color: $grey-level1;
            color:$html-color;
            border-radius: $standard-border-radius;

            &:hover {
                background-color: $primary-color;
                color: white;
            }
        }

        &:hover {
            cursor: pointer;
            background-color: $pagination-li-hover;
        }
    }

    &__li {
       &--active{
           a {
                background-color: $pagination-li-active!important;
                color: $primary-color-on!important;
            }
        }
    }
    &__a {
        color:$html-color;
        &--active{
            opacity: 1;
        }
    }
    & > &__btn {
        &-prev{
            margin-left: 0;
            &__a{
                color:$html-color;
                opacity: 1;
            }
        }
        &-next{
            margin-right: 0;
            &__a{
                color:$html-color;
                opacity: 1;
            }
        }
        &--disabled {
            display: none;

            & + li {
                margin-left: 0;
            }
        }
    }
    // next && prev Btn
    & > li:first-child,li:last-child { 
        opacity: 1;
    }
}