@value (colorFillPrimary, colorTextSecondary, colorTextDisabled) from '../../styles/variables/_color.css';
@value (spaceXXSmall, spaceNone, spaceSmall, spaceXSmall) from '../../styles/variables/_space.css';
@value (size34, sizeFluid, size40) from '../../styles/variables/_size.css';

.wrapper {
  display: flex;
  align-items: center;
  width: sizeFluid;
  height: fit-content;
  justify-content: space-between;
}

.childrenSlot {
  display: flex;
}

.paginatorSlot {
  display: flex;
  gap: spaceXXSmall;
}

.paginatorSlots {
  display: flex;
  gap: spaceSmall;
}

.secondaryLabel {
  margin-right: spaceXSmall;
}

.paginatorButton {
  min-width: size34;
  padding: spaceNone;
  color: colorTextSecondary;
}

.pageNumbers {
  display: flex;
  align-items: center;
  gap: spaceXXSmall;
}

.separator {
  display: flex;
  width: size34;
  height: size34;
  align-items: center;
  justify-content: center;
}

.paginatorButton.disabled {
  background-color: initial;
}

.paginatorButton.selected {
  pointer-events: none;
}

.icon {
  color: colorTextSecondary;
}

.icon.disabled {
  color: colorTextDisabled;
}

.dropdownWrapper {
  width: calc(size40 * 2);
}

.menuWrapper {
  min-width: calc(size40 * 2);
}