/**
 * Color variants
 */

.pagination {
    &.-light {
        --pagination--background: var(--pagination--light--background, var(--color-light));
        --pagination--border-top-color: var(
            --pagination--light--border-top-color,
            var(--color-light-shade-50)
        );
        --pagination--border-right-color: var(
            --pagination--light--border-right-color,
            var(--color-light-shade-50)
        );
        --pagination--border-bottom-color: var(
            --pagination--light--border-bottom-color,
            var(--color-light-shade-50)
        );
        --pagination--border-left-color: var(
            --pagination--light--border-left-color,
            var(--color-light-shade-50)
        );
        --pagination--color: var(--pagination--light--color, var(--contrast-text-color-light));

        --pagination--hover--background: var(
            --pagination--light--hover--background,
            var(--color-light-shade-50)
        );

        --pagination--active--background: var(
            --pagination--light--active--background,
            var(--color-primary)
        );
        --pagination--active--border-top-color: var(
            --pagination--light--border-top-color--active,
            var(--color-primary-shade-50)
        );
        --pagination--active--border-right-color: var(
            --pagination--light--border-right-color--active,
            var(--color-primary-shade-50)
        );
        --pagination--active--border-bottom-color: var(
            --pagination--light--border-bottom-color--active,
            var(--color-primary-shade-50)
        );
        --pagination--active--border-left-color: var(
            --pagination--light--border-left-color--active,
            var(--color-primary-shade-50)
        );
        --pagination--active--color: var(
            --pagination--light--active--color,
            var(--contrast-text-color-primary)
        );

        --pagination--disabled--color: var(
            --pagination--light--disabled--color,
            var(--text-color-weak)
        );
    }

    &.-dark {
        --pagination--background: var(--pagination--dark--background, var(--color-dark));
        --pagination--border-top-color: var(
            --pagination--dark--border-top-color,
            var(--color-dark-tint-50)
        );
        --pagination--border-right-color: var(
            --pagination--dark--border-right-color,
            var(--color-dark-tint-50)
        );
        --pagination--border-bottom-color: var(
            --pagination--dark--border-bottom-color,
            var(--color-dark-tint-50)
        );
        --pagination--border-left-color: var(
            --pagination--dark--border-left-color,
            var(--color-dark-tint-50)
        );
        --pagination--color: var(--pagination--dark--color, var(--contrast-text-color-dark));

        --pagination--hover--background: var(
            --pagination--dark--hover--background,
            var(--color-dark-tint-50)
        );

        --pagination--active--background: var(
            --pagination--dark--active--background,
            var(--color-primary)
        );
        --pagination--active--border-top-color: var(
            --pagination--dark--border-top-color--active,
            var(--color-primary-shade-50)
        );
        --pagination--active--border-right-color: var(
            --pagination--dark--border-right-color--active,
            var(--color-primary-shade-50)
        );
        --pagination--active--border-bottom-color: var(
            --pagination--dark--border-bottom-color--active,
            var(--color-primary-shade-50)
        );
        --pagination--active--border-left-color: var(
            --pagination--dark--border-left-color--active,
            var(--color-primary-shade-50)
        );
        --pagination--active--color: var(
            --pagination--dark--active--color,
            var(--contrast-text-color-primary)
        );

        --pagination--disabled--color: var(
            --pagination--dark--disabled--color,
            var(--text-color-weak)
        );
    }
}