.pagination-button-type{
    @include flex-layout(flex, center, center);

    a{
        width: 3.5rem;
        height: 3.5rem;
        @include flex-layout(flex, center, center);
        border: 1px solid var(--tk-gray-30);
        border-radius: var(--tk-rd-10);
        margin: 0 .5rem;
        cursor: pointer;
        user-select: none;

        &.active{
            background-color: var(--tk-main-50);
            border: 1px solid var(--tk-main-50);
            color: var(--tk-white);
            cursor: default;
        }

        &.prev{
            background-image: url(#{$url}/component/common/ico_arr_16_right_gray70.svg);
            background-repeat: no-repeat;
            background-position: center;
            transform: scaleX(-1); 
        }
        &.next{
            background-image: url(#{$url}/component/common/ico_arr_16_right_gray70.svg);
            background-repeat: no-repeat;
            background-position: center;
        }

        &.first-page{
            background-image: url(#{$url}/component/common/ico_double_gray.svg);
            background-repeat: no-repeat;
            background-position: center;
            transform: scaleX(-1); 
        }

        &.end-page{
            background-image: url(#{$url}/component/common/ico_double_gray.svg);
           background-repeat: no-repeat;
            background-position: center;
        }
    }
    
}