@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$pagination-spacer: calc(0.5 * h.useVar("control-spacer")) !default;
$pagination-disabled-opacity: h.useVar("control-disabled-opacity") !default;
$pagination-ellipsis-color: h.useVar("grey-light") !default;

$pagination-button-color: h.useVar("font-color") !default;
$pagination-button-font-size: h.useVar("font-size") !default;
$pagination-button-font-weight: h.useVar("font-weight") !default;
$pagination-button-line-height: h.useVar("line-height") !default;

$pagination-button-height: 2.25em !default;
$pagination-button-min-width: $pagination-button-height !default;
$pagination-button-padding: h.useVar("control-spacer") !default;

$pagination-button-box-shadow: none !default;
$pagination-button-border-width: h.useVar("control-border-width") !default;
$pagination-button-border-color: h.useVar("control-border-color") !default;
$pagination-button-border-style: solid !default;
$pagination-button-border-radius: h.useVar("border-radius") !default;
$pagination-button-border-radius-rounded: h.useVar(
    "border-radius-rounded"
) !default;
$pagination-button-background-color: h.useVar(
    "control-background-color"
) !default;

$pagination-button-hover-color: $pagination-button-color;
$pagination-button-hover-background-color: $pagination-button-background-color;
$pagination-button-hover-border-color: $pagination-button-border-color;

$pagination-button-current-color: h.useVar("white") !default;
$pagination-button-current-background-color: h.useVar("primary") !default;
$pagination-button-current-border-color: h.useVar("primary") !default;
/* @docs */

.o-pagination {
    @include h.defineVar("pagination-spacer", $pagination-spacer);
    @include h.defineVar(
        "pagination-disabled-opacity",
        $pagination-disabled-opacity
    );
    @include h.defineVar(
        "pagination-ellipsis-color",
        $pagination-ellipsis-color
    );

    @include h.defineVar("pagination-button-color", $pagination-button-color);
    @include h.defineVar(
        "pagination-button-font-size",
        $pagination-button-font-size
    );
    @include h.defineVar(
        "pagination-button-font-weight",
        $pagination-button-font-weight
    );
    @include h.defineVar(
        "pagination-button-line-height",
        $pagination-button-line-height
    );

    @include h.defineVar("pagination-button-height", $pagination-button-height);
    @include h.defineVar(
        "pagination-button-min-width",
        $pagination-button-min-width
    );
    @include h.defineVar(
        "pagination-button-padding",
        $pagination-button-padding
    );

    @include h.defineVar(
        "pagination-button-box-shadow",
        $pagination-button-box-shadow
    );
    @include h.defineVar(
        "pagination-button-border-width",
        $pagination-button-border-width
    );
    @include h.defineVar(
        "pagination-button-border-color",
        $pagination-button-border-color
    );
    @include h.defineVar(
        "pagination-button-border-style",
        $pagination-button-border-style
    );
    @include h.defineVar(
        "pagination-button-border-radius",
        $pagination-button-border-radius
    );
    @include h.defineVar(
        "pagination-button-border-radius-rounded",
        $pagination-button-border-radius-rounded
    );
    @include h.defineVar(
        "pagination-button-background-color",
        $pagination-button-background-color
    );

    @include h.defineVar(
        "pagination-button-hover-color",
        $pagination-button-hover-color
    );
    @include h.defineVar(
        "pagination-button-hover-background-color",
        $pagination-button-hover-background-color
    );
    @include h.defineVar(
        "pagination-button-hover-border-color",
        $pagination-button-hover-border-color
    );

    @include h.defineVar(
        "pagination-button-current-color",
        $pagination-button-current-color
    );
    @include h.defineVar(
        "pagination-button-current-background-color",
        $pagination-button-current-background-color
    );
    @include h.defineVar(
        "pagination-button-current-border-color",
        $pagination-button-current-border-color
    );

    align-items: center;
    display: flex;
    text-align: center;
    justify-content: space-between;

    // size variants
    @each $name, $value in vars.$sizes {
        &--#{$name} {
            @include h.defineVar(
                "pagination-button-font-size",
                h.useVar("size-#{$name}")
            );
        }
    }

    // TODO: normal o-button will be used here later
    &__button {
        // define focus shadow effect
        @include h.focusable;

        // add clickable cursor
        @include h.clickable;

        // remove default appearance
        @include h.removeAppearance;
        text-decoration: none;

        position: relative;
        display: inline-flex;
        align-items: center;
        vertical-align: top;
        justify-content: center;
        text-align: center;

        color: h.useVar("pagination-button-color");
        font-size: h.useVar("pagination-button-font-size");
        font-weight: h.useVar("pagination-button-font-weight");
        line-height: h.useVar("pagination-button-line-height");

        box-shadow: h.useVar("pagination-button-box-shadow");
        background-color: h.useVar("pagination-button-background-color");

        border-color: h.useVar("pagination-button-border-color");
        border-style: h.useVar("pagination-button-border-style");
        border-width: h.useVar("pagination-button-border-width");
        border-radius: h.useVar("pagination-button-border-radius");

        min-width: h.useVar("pagination-button-min-width");
        height: h.useVar("pagination-button-height");
        padding: h.useVar("pagination-button-padding");
        margin: h.useVar("pagination-spacer");

        &:focus,
        &:hover {
            color: h.useVar("pagination-button-hover-color");
            border-color: h.useVar("pagination-button-hover-border-color");
            background-color: h.useVar(
                "pagination-button-background-color-hover"
            );
        }

        &--rounded {
            @include h.defineVar(
                "pagination-button-border-radius",
                h.useVar("pagination-button-border-radius-rounded")
            );
        }

        &--disabled {
            @include h.disabled(h.useVar("control-disabled-opacity"));
        }

        &--current {
            pointer-events: none;
            background-color: h.useVar(
                "pagination-button-current-background-color"
            );
            border-color: h.useVar("pagination-button-current-border-color");
            color: h.useVar("pagination-button-current-color");
        }
    }

    &__ellipsis {
        justify-content: center;
        text-align: center;
        pointer-events: none;
        margin: h.useVar("pagination-spacer");
        color: h.useVar("pagination-ellipsis-color");
    }

    &__button-next {
        order: 3;
    }

    &__button-previous {
        order: 2;
    }

    &__list {
        align-items: center;
        display: flex;
        text-align: center;
        list-style: none;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        order: 1;
    }

    &--simple {
        justify-content: normal;
    }

    &--centered {
        justify-content: center;

        .o-pagination__button-previous {
            order: 1;
        }

        .o-pagination__button-next {
            order: 3;
        }

        .o-pagination__list {
            justify-content: center;
            order: 2;
        }
    }

    &--right {
        justify-content: flex-end;

        .o-pagination__button-previous {
            order: 1;
        }

        .o-pagination__button-next {
            order: 2;
        }

        .o-pagination__list {
            justify-content: flex-end;
            order: 2;
        }
    }

    &--mobile {
        justify-content: flex-start;
        flex-wrap: wrap;

        .o-pagination__button {
            flex-grow: 1;
            flex-shrink: 1;
        }

        .o-pagination__button-previous {
            flex-grow: 1;
            flex-shrink: 1;
            order: 0;
        }

        .o-pagination__button-next {
            flex-grow: 1;
            flex-shrink: 1;
            order: 0;
        }

        .o-pagination__ellipsis {
            flex-grow: 1;
            flex-shrink: 1;
        }

        .o-pagination__list {
            order: 0;
            justify-content: end;
        }
    }
}