@import "../lib.less";

.@{veui-prefix}-pagination {
  display: inline-flex;
  font-size: @dls-pagination-font-size-m;

  &,
  &-info,
  &-pages,
  &-switch,
  & .@{veui-prefix}-link {
    display: inline-flex;
    align-items: center;
  }

  &-info {
    margin-right: @dls-pagination-page-items-margin-before;
  }

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

    .@{veui-prefix}-select {
      width: auto;
      flex-grow: 0;
      margin-left: @dls-pagination-spacing-1;
    }
  }

  &-total {
    display: none;
  }

  &-goto {
    display: flex;
    align-items: center;
    margin-left: @dls-pagination-page-items-margin-after;

    .@{veui-prefix}-input {
      width: @dls-pagination-goto-input-width;
      .padding(_, @dls-pagination-goto-input-padding-x);
    }

    &-label-before,
    &-label-after {
      display: block;
    }

    &-label-before {
      margin-right: @dls-pagination-spacing-1;
    }

    &-label-after {
      margin-left: @dls-pagination-spacing-1;
    }

    .@{veui-prefix}-button {
      margin-left: @dls-pagination-spacing-2;
    }
  }

  &-pages {
    list-style: none;
    margin: 0 @dls-pagination-page-item-spacing;
    padding: 0;
  }

  &-page + &-page {
    margin-left: @dls-pagination-page-item-spacing;
  }

  .make-metrics(@size) {
    @height: ~"dls-button-height-@{size}";
    @radius: ~"dls-button-border-radius-@{size}";
    @min-width: ~"dls-pagination-page-item-min-width-@{size}";
    height: @@height;
    min-width: @@min-width;
    border-radius: @@radius;
  }

  .@{veui-prefix}-link {
    .padding(_, @dls-pagination-page-item-padding-x);
    .make-metrics(m);
    align-items: center;
    justify-content: center;
    background-color: @dls-pagination-page-item-background-color;
    text-decoration: none;
    line-height: 1;
    font-size: inherit;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    cursor: pointer;

    color: @dls-pagination-page-item-font-color;
    .veui-button-transition();

    &:hover {
      background-color: @dls-pagination-page-item-background-color-hover;
    }

    &[data-focus-visible-added] {
      background-color: @dls-pagination-page-item-background-color-focus;
      .dls-focus-ring(@dls-button-border-color-focus, @dls-button-shadow-focus);
    }

    &:hover,
    &[data-focus-visible-added] {
      text-decoration: none;
    }

    &:active {
      background-color: @dls-pagination-page-item-background-color-active;
    }

    &.@{veui-prefix}-disabled {
      background-color: @dls-pagination-page-item-background-color-disabled;
      color: @dls-pagination-page-item-font-color-disabled;
    }

    &.@{veui-prefix}-current {
      border-color: @dls-button-border-color-primary;
      background-color: @dls-button-background-color-primary;
      color: @dls-button-font-color-primary;

      &:hover {
        background-color: @dls-button-background-color-primary-hover;
      }

      &:active {
        background-color: @dls-button-background-color-primary-active;
      }
    }

    &.@{veui-prefix}-pagination-more {
      position: relative;

      .@{veui-prefix}-icon {
        .veui-transition(opacity);
      }

      .@{veui-prefix}-pagination-more-ellipsis {
        opacity: 1;
      }

      .@{veui-prefix}-pagination-more-arrow {
        position: absolute;
        opacity: 0;
      }

      &:hover,
      &[data-focus-visible-added] {
        .@{veui-prefix}-pagination-more-ellipsis {
          opacity: 0;
        }

        .@{veui-prefix}-pagination-more-arrow {
          opacity: 1;
        }
      }
    }
  }

  &[ui~="xs"] {
    font-size: @dls-pagination-font-size-xs;

    .@{veui-prefix}-link {
      .make-metrics(xs);
    }
  }

  &[ui~="s"] {
    font-size: @dls-pagination-font-size-s;

    .@{veui-prefix}-link {
      .make-metrics(s);
    }
  }
}