$pagination-color: $grey-darker !default;
$pagination-border-color: $grey-lighter !default;
$pagination-margin: -0.25rem !default;

$pagination-hover-color: $link-hover !default;
$pagination-hover-border-color: $link-hover-border !default;

$pagination-focus-color: $link-focus !default;
$pagination-focus-border-color: $link-focus-border !default;

$pagination-active-color: $link-active !default;
$pagination-active-border-color: $link-active-border !default;

$pagination-disabled-color: $grey !default;
$pagination-disabled-background-color: $grey-lighter !default;
$pagination-disabled-border-color: $grey-lighter !default;

$pagination-current-color: $link-invert !default;
$pagination-current-background-color: $link !default;
$pagination-current-border-color: $link !default;

$pagination-ellipsis-color: $grey-light !default;

$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2);

.sgds {
  &-pagination {
    font-size: $size-normal;
    margin: $pagination-margin;
    ul.sgds-pagination-list{
      margin-left: 0.25rem;
      margin-right: 0.25rem;
    }
    li.sgds-pagination-link{
        margin-top: 0.25rem;
    }
    // Sizes
    &.is-small {
      font-size: $size-small;
    }

    &.is-medium {
      font-size: $size-medium;
    }

    &.is-large {
      font-size: $size-large;
    }

    &.is-rounded {
      .sgds-pagination-previous,
      .sgds-pagination-next {
        padding-left: 1em;
        padding-right: 1em;
        border-radius: $radius-rounded;
      }

      .sgds-pagination-link {
        border-radius: $radius-rounded;
      }
    }
  }

  &-pagination,
  &-pagination-list {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
  }

  &-pagination-previous,
  &-pagination-next,
  &-pagination-link,
  &-pagination-ellipsis {
    @include control;
    @include unselectable;

    font-size: 1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    justify-content: center;
    margin: 0.25rem;
    text-align: center;
  }

  &-pagination-previous,
  &-pagination-next,
  &-pagination-link {
    border-color: $pagination-border-color;
    color: $pagination-color;
    min-width: 2.25em;

    &:hover {
      border-color: $pagination-hover-border-color;
      color: $pagination-hover-color;
    }

    &:focus {
      border-color: $pagination-focus-border-color;
    }

    &:active {
      box-shadow: $pagination-shadow-inset;
    }

    &[disabled] {
      background-color: $pagination-disabled-background-color;
      border-color: $pagination-disabled-border-color;
      box-shadow: none;
      color: $pagination-disabled-color;
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  &-pagination-previous,
  &-pagination-next {
    padding-left: 0.75em;
    padding-right: 0.75em;
    white-space: nowrap;
  }
  
  &-pagination-link {
    &.is-current {
      background-color: $pagination-current-background-color;
      border-color: $pagination-current-border-color;
      color: $pagination-current-color;
    }
  }

  &-pagination-ellipsis {
    color: $pagination-ellipsis-color;
    pointer-events: none;
  }

  &-pagination-list {
    flex-wrap: wrap;
  }

  @include mobile {
    &-pagination {
      flex-wrap: wrap;
    }

    &-pagination-previous,
    &-pagination-next {
      flex-grow: 1;
      flex-shrink: 1;
    }

    &-pagination-list {
      li {
        flex-grow: 1;
        flex-shrink: 1;
      }
    }
  }


  @include tablet {
    &-pagination-list {
      flex-grow: 1;
      flex-shrink: 1;
      justify-content: flex-start;
      order: 1;
    }

    &-pagination-previous {
      order: 2;
    }

    &-pagination-next {
      order: 3;
    }

    &-pagination {
      justify-content: space-between;

      &.is-centered {
        .sgds-pagination-previous {
          order: 1;
        }

        .sgds-pagination-list {
          justify-content: center;
          order: 2;
        }

        .sgds-pagination-next {
          order: 3;
        }
      }

      &.is-right {
        .sgds-pagination-previous {
          order: 1;
        }

        .sgds-pagination-next {
          order: 2;
        }

        .sgds-pagination-list {
          justify-content: flex-end;
          order: 3;
        }
      }
    }
  }
}