@use '../../styles/bootstrap/mixins/border-radius';
@use '../../styles/bootstrap/mixins/lists';
@use '../../styles/bootstrap/variables' as bootstrap-variables;
@use '../../styles/variables';
@use 'mixin';

.thy-pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: variables.$pagination-color;
    font-size: variables.$font-size-base;

    &-has-total {
        justify-content: space-between;
    }
    &-total {
        display: flex;
        padding-right: 10px;
        color: variables.$gray-600;

        > div {
            display: inline-block;
        }

        .number {
            color: variables.$gray-800;
        }
    }

    &-content {
        display: flex;
        align-items: center;
    }

    &-size {
        width: variables.$pagination-page-size-width;
        margin-right: 10px;
        .selected-value {
            color: variables.$pagination-jumper-input-color !important;
        }
        .select-control {
            .select-control-arrow {
                padding-bottom: 1px;
                right: 8px;
            }
        }
    }

    &-pages {
        display: flex;
        margin: 0;
        @include lists.list-unstyled();
        @include border-radius.border-radius();
    }

    &-count {
        display: flex;
        align-items: center;

        margin-left: 10px;
        span {
            color: variables.$pagination-total-pages-color;
            margin: 0 2px;
        }
    }

    &-jumper {
        display: flex;
        align-items: center;
        &-input {
            height: variables.$pagination-item-height;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: variables.$pagination-jumper-margin;
        }

        input {
            height: 100%;
            outline: none;
            padding-bottom: 1px;
            border: variables.$pagination-border-width solid variables.$pagination-border-color;
            @include border-radius.border-radius(variables.$border-radius);
            color: variables.$pagination-jumper-input-color;
            background: variables.$bg-default;
            width: calc(#{variables.$font-size-base} * 3);
            text-align: center;
            margin: 0 6px;
        }
    }
}
.thy-select-dropdown {
    .thy-select-dropdown-options {
        .page-size-option {
            padding-left: 15px;
            padding-right: 15px;
        }
    }
}
.thy-page-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: variables.$pagination-number-color;
    padding: variables.$pagination-padding-y variables.$pagination-padding-x;
    margin-left: -(variables.$pagination-border-width);
    background-color: variables.$pagination-bg;
    border: variables.$pagination-border-width solid variables.$pagination-border-color;

    &:hover {
        color: variables.$pagination-hover-color;
        text-decoration: none;
        background-color: variables.$pagination-hover-bg;
        border-color: variables.$pagination-hover-border-color;
    }

    &:focus {
        outline: bootstrap-variables.$pagination-focus-outline;
        box-shadow: variables.$box-shadow-none;
    }
}

.thy-page-item {
    min-width: variables.$pagination-item-width;
    height: variables.$pagination-item-height;
    .thy-page-link {
        padding: variables.$pagination-padding-y, variables.$pagination-padding-x;
    }
    &:first-child {
        .thy-page-link {
            color: variables.$pagination-color;
            margin-left: 0;
            @include border-radius.border-left-radius(variables.$border-radius);
            &:hover {
                color: variables.$pagination-hover-color;
                text-decoration: none;
                background-color: variables.$pagination-hover-bg;
                border-color: variables.$pagination-hover-border-color;
            }
        }
    }

    &:last-child {
        .thy-page-link {
            color: variables.$pagination-color;
            @include border-radius.border-right-radius(variables.$border-radius);
            &:hover {
                color: variables.$pagination-hover-color;
                text-decoration: none;
                background-color: variables.$pagination-hover-bg;
                border-color: variables.$pagination-hover-border-color;
            }
        }
    }

    &.active .thy-page-link {
        z-index: 1;
        color: variables.$pagination-active-color;
        background-color: variables.$pagination-active-bg;
        border-color: variables.$pagination-active-border-color;
    }

    &.disabled .thy-page-link {
        color: variables.$pagination-disabled-color;
        pointer-events: none;
        // Opinionated: remove the "hand" cursor set previously for .page-link
        cursor: variables.$disabled-cursor;
        background-color: variables.$pagination-disabled-bg;
        border-color: variables.$pagination-disabled-border-color;
    }
}

//
// Sizing
//

.thy-pagination-lg {
    @include mixin.pagination-size(
        variables.$font-size-lg,
        variables.$border-radius-lg,
        variables.$pagination-item-width-lg,
        variables.$pagination-item-height-lg,
        variables.$pagination-line-height-lg,
        variables.$pagination-page-size-width-lg
    );
}

.thy-pagination-sm {
    @include mixin.pagination-size(
        variables.$font-size-sm,
        variables.$border-radius-sm,
        variables.$pagination-item-width-sm,
        variables.$pagination-item-height-sm,
        variables.$pagination-line-height-sm,
        variables.$pagination-page-size-width-sm
    );
}
