.funkwhale.pagination {
li {
        padding-left: 0;
}

    container-type: inline-size;
    container-name: pagination;

    justify-content: space-between;
> ul.pages {
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 4px;
> li {
        margin: 0;
        text-align: center;
&::before {
            display: none;
}
&:not(:first-child):not(:last-child):not(.visually-hidden-when-tiny) {
          min-width: 34px;
}
&:first-child > .funkwhale.button,
        &:last-child > .funkwhale.button {
          width: 94px;
          text-align: center;
}
}
}
    /* People using a screen reader want to be able to use default 'previous page', 'next page' controls*/
@container pagination (max-width: 600px) {
.visually-hidden-when-small:not(:has(:focus)):not(:has(:active)) {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        white-space: nowrap;
        width: 1px;
}
}

    /* 2. Hide the 'tiny' items when container drops below 400px */
@container pagination (max-width: 450px) {
> ul.pages {
        gap: 0px;
}
.visually-hidden-when-tiny:not(:has(:focus)):not(:has(:active)) {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        white-space: nowrap;
        width: 1px;
}
>[ui-inline-size] {
        flex-shrink: 1;
        flex-grow: 0;
        min-width: 48px;
}
}
}