/* stylelint-disable declaration-property-value-keyword-no-deprecated */
@use '@mezzanine-ui/system/effect' as effect;
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/transition' as transition;
@use '@mezzanine-ui/core/button/utils';
@use './pagination' as *;

.#{$prefix} {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  justify-self: flex-end;
  padding: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, horizontal, comfort);
  background-color: palette.semantic-variable("background", neutral-ghost);
  width: 100%;
  gap: spacing.semantic-variable(gap, comfort);

  &__result-summary {
    margin-right: auto;
    width: 100%;
  }

  &__container {
    align-items: center;
    column-gap: spacing.semantic-variable(gap, comfort);
    display: grid;
    grid-auto-flow: column;
    justify-content: left;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
  }

  &__item-list {
    display: flex;
    gap: spacing.semantic-variable(gap, tight);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__page-size {
    align-items: center;
    display: flex;
    gap: spacing.semantic-variable(gap, base);
  }
}

.#{$item-prefix} {
  align-items: center;
  color: palette.semantic-variable(text, neutral);
  display: flex;
  height: spacing.semantic-variable(size, element, airy);
  justify-content: center;
  transition: transition.standard(background-color, fast), transition.standard(color, fast);
  width: spacing.semantic-variable(size, element, airy);

  &__button {
    @include utils.reset();

    border-radius: radius.variable(base);
  }

  &__ellipsis {
    cursor: default;
    pointer-events: none;
    user-select: none;
  }

  &:hover {
    color: palette.semantic-variable(text, neutral-solid);
  }

  &--active,
  &:active {
    background-color: palette.semantic-variable(background, brand-faint);
    color: palette.semantic-variable(text, neutral-solid);
  }

  &--disabled,
  &:disabled {
    color: palette.semantic-variable(text, neutral-faint);
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
  }

  &:focus-visible {
    box-shadow: effect.variable(focus, primary);
  }
}

.#{$jumper-prefix} {
  align-items: center;
  display: flex;
  gap: spacing.semantic-variable(gap, base);

  .#{$jumper-prefix}__input {
    width: spacing.semantic-variable(size, element, loose-fixed);

    .mzn-input {
      min-width: unset;
    }

    $input-padding-container: mzn-input--number;
    .#{$input-padding-container} {
      padding: spacing.semantic-variable(padding, vertical, tight) spacing.semantic-variable(padding, horizontal, tiny);
    }
  }
}

.#{$page-size-prefix} {
  align-items: center;
  display: flex;
  gap: spacing.semantic-variable(gap, base);
  width: fit-content;

  &__select {
    width: spacing.semantic-variable(size, container, concentrate-fixed);
  }
}