$pagination-background: transparent !default;
$pagination-border-color: transparent !default;
$pagination-border-width: 1px !default;
$pagination-border-radius: 0 !default;
$pagination-font-size: 0.875rem !default;
$pagination-color: var(--color-black) !default;
$pagination-line-height: 1.5 !default;
$pagination-margin: 0.125rem !default;
$pagination-padding: 0.375rem 0.75rem !default;
$pagination-padding-bottom: calc(0.375rem - 1px) !default;
$pagination-active-background: var(--color-primary) !default;
$pagination-active-color: var(--color-primary-text) !default;
$pagination-disabled-opacity: 0.5 !default;
$pagination-hover-background: var(--color-light) !default;
$pagination-hover-color: var(--color-black) !default;
$pagination-rounded-radius: 50px !default;
$pagination-rounded-margin: 0.25rem !default;
$pagination-bordered-background: var(--color-white) !default;
$pagination-bordered-color: var(--color-black) !default;
$pagination-bordered-radius: 4px !default;
$pagination-bordered-border-color: var(--color-light-grey) !default;
$pagination-bordered-active-background: var(--color-primary) !default;
$pagination-bordered-active-border-color: var(--color-primary) !default;
$pagination-bordered-active-color: var(--color-primary-text);
$pagination-bordered-hover-background: var(--color-white) !default;
$pagination-bordered-hover-border-color: var(--color-light-grey-darker) !default;
$pagination-bordered-hover-color: var(--color-black) !default;

.pagination {
  --background-color: #{$pagination-background};
  --font-color: #{$pagination-color};
  --border-color: #{$pagination-border-color};
  --border-width: #{$pagination-border-width};
  --border-radius: #{$pagination-border-radius};
  --font-size: #{$pagination-font-size};
  --line-height: #{$pagination-line-height};
  --margin: #{$pagination-margin};
  --padding: #{$pagination-padding};
  --disabled-opacity: #{$pagination-disabled-opacity};

  --hover-background-color: #{$pagination-hover-background};
  --hover-font-color: #{$pagination-hover-color};
  --hover-border-color: transparent;
  --active-background-color: #{$pagination-active-background};
  --active-font-color: #{$pagination-active-color};
  --active-border-color: transparent;

  display: flex;
  flex-direction: column;
  font-size: var(--font-size);

  @include medium {
    align-items: flex-end;
    flex-direction: row;
  }

  ul {
    display: flex;
    font-size: inherit;
    margin: 0;
  }

  .is-center {
    margin: 0 auto;
  }

  .is-end {
    margin-left: auto;
  }

  li {
    background-color: var(--background-color);
    border-color: var(--border-color);
    border-style: solid;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    cursor: pointer;
    color: var(--font-color);
    display: inline-block;
    line-height: var(--line-height);
    justify-content: center;
    margin: var(--margin);
    text-align: center;

    a {
      color: inherit;
      display: block;
      padding: var(--padding);

      &:hover {
        text-decoration: none;
      }
    }

    &.is-active {
      --background-color: var(--active-background-color);
      --font-color: var(--active-font-color);
      --border-color: var(--active-border-color);
    }

    &.is-disabled, &.is-disabled > a {
      cursor: not-allowed;
      opacity: var(--disabled-opacity);
    }

    &:hover:not(.is-active):not(.is-disabled) {
      --background-color: var(--hover-background-color);
      --font-color: var(--hover-font-color);
      --border-color: var(--hover-border-color);
    }

  }

  &.has-border {
    --background-color: #{$pagination-bordered-background};
    --font-color: #{$pagination-bordered-color};
    --border-color: #{$pagination-bordered-border-color};
    --border-radius: #{$pagination-bordered-radius};

    --hover-background-color: #{$pagination-bordered-hover-background};
    --hover-font-color: #{$pagination-bordered-hover-color};
    --hover-border-color: #{$pagination-bordered-hover-border-color};
    --active-background-color: #{$pagination-bordered-active-background};
    --active-font-color: #{$pagination-bordered-active-color};
    --active-border-color: #{$pagination-bordered-active-border-color};
  }

  &.has-round {
    --margin: #{$pagination-rounded-margin};
    --border-radius: #{$pagination-rounded-radius};
  }
}