@import '../dynamic';

.pagination {
    .page-item {
        margin: 0 0.2rem;
        .btn {
            margin: 0 $input-height;
        }
        .page-link {
            background-color: transparent;
            line-height: calc(#{$input-height} - #{$border-width * 2});
            text-align: center;
            padding: 0;
            border: $border-width solid transparent;
            border-radius: 50%;
            height: $input-height;
            width: $input-height;
            &:hover,
            &:focus {
                border-color: $gray-400;
                outline: none;
                box-shadow: none;
            }
        }
        &.active > .page-link {
            background-color: $branded;
            color: $black;
            border-color: $branded;
            &:focus {
                background-color: map-get($highlighted-colors, branded);
                border-color: map-get($active-colors, branded);
                outline: none;
                box-shadow: none;
            }
        }
        &:last-child {
            margin-right: 0;
            .btn {
                margin-right: 0;
            }
            .page-link {
                border-radius: 50%;
            }
        }
        &:first-child {
            margin-left: 0;
            .btn {
                margin-left: 0;
            }
            .page-link {
                border-radius: 50%;
            }
        }
        &.disabled {
            cursor: default;
        }
    }

    &.pagination-lg {
        .page-link {
            font-size: $font-size-lg;
            line-height: $input-height-lg;
            height: $input-height-lg;
            width: $input-height-lg;
        }
    }

    &.pagination-sm {
        .page-link {
            font-size: $font-size-sm;
            line-height: $input-height-sm;
            height: $input-height-sm;
            width: $input-height-sm;
        }
    }
}