@import '~@maggioli-design-system/styles/dist/css/animations.css'; /* included for focus effect */
@import '../../tailwind/components.css';
@tailwind components;

/**
 * @prop --mds-paginator-item-background-disabled: Sets the background-color of the item when is disabled
 * @prop --mds-paginator-item-background-hover: Sets the background-color of the item when the mouse is over it
 * @prop --mds-paginator-item-background-selected: Sets the background-color of the item when is selected
 * @prop --mds-paginator-item-background: Sets the background-color of the pages area and the item
 * @prop --mds-paginator-item-color-disabled: Sets the color of the item when is disabled
 * @prop --mds-paginator-item-color-hover: Sets the text color of the item when the mouse is over it
 * @prop --mds-paginator-item-color-selected: Sets the text color of the item when is selected
 * @prop --mds-paginator-item-color: Sets the text color of the component
 * @prop --mds-paginator-item-radius: Sets the border-radius of the component
 * @prop --mds-paginator-item-shadow-disabled: Sets the box-shadow of the item when is disabled
 * @prop --mds-paginator-item-shadow-hover: Sets the box-shadow of the item when the mouse is over it
 * @prop --mds-paginator-item-shadow-selected: Sets the box-shadow of the item when is selected
 * @prop --mds-paginator-item-shadow: Sets the box-shadow of the component
 * @prop --mds-paginator-item-size: Sets the height and the min-width of the paginator item
 */

:host {
  --mds-paginator-item-background-disabled: theme('colors.tone-neutral-09');
  --mds-paginator-item-background-hover: theme('colors.tone-neutral-08');
  --mds-paginator-item-background-selected: theme('colors.variant-primary-03');
  --mds-paginator-item-background: transparent;
  --mds-paginator-item-color-disabled: theme('colors.tone-neutral-06');
  --mds-paginator-item-color-hover: theme('colors.tone-neutral-02');
  --mds-paginator-item-color-selected: theme('colors.tone-neutral');
  --mds-paginator-item-color: theme('colors.tone-neutral-02');
  --mds-paginator-item-radius: 200px;
  --mds-paginator-item-shadow-disabled: none;
  --mds-paginator-item-shadow-hover: none;
  --mds-paginator-item-shadow-selected: theme('boxShadow.md-sharp');
  --mds-paginator-item-shadow: none;
  --mds-paginator-item-size: theme('spacing.900');

  @apply
    duration-200
    ease-out
    focus-bounce
    px-300;

  align-items: center;
  background-color: var(--mds-paginator-item-background);
  border-radius: var(--mds-paginator-item-radius);
  box-shadow: var(--mds-paginator-item-shadow);
  box-sizing: border-box;
  color: var(--mds-paginator-item-color);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: var(--mds-paginator-item-size);
  justify-content: center;
  min-width: var(--mds-paginator-item-size);
  transition-property: background-color, box-shadow, color, outline, outline-offset;
  user-select: none;
}

:host(:focus-visible) {
  @apply focus-bounce--focused;
}

:host(:hover) {
  background-color: var(--mds-paginator-item-background-hover);
  box-shadow: var(--mds-paginator-item-shadow-hover);
  color: var(--mds-paginator-item-color-hover);
  fill: var(--mds-paginator-item-color-hover);
}

:host([icon]) {
  @apply p-0;
}

:host([selected]) {
  background-color: var(--mds-paginator-item-background-selected);
  box-shadow: var(--mds-paginator-item-shadow-selected);
  color: var(--mds-paginator-item-color-selected);
  fill: var(--mds-paginator-item-color-selected);
  pointer-events: none;
}

:host([disabled]) {
  background-color: var(--mds-paginator-item-background-disabled);
  box-shadow: var(--mds-paginator-item-shadow-disabled);
  color: var(--mds-paginator-item-color-disabled);
  fill: var(--mds-paginator-item-color-disabled);
  pointer-events: none;
}

.icon {
  @apply px-0;

  fill: currentcolor;
}

@import './css/mds-paginator-item-pref-animation.css';
@import './css/mds-paginator-item-pref-theme.css';
@import '../../tailwind/fouc.css';