@layer ds_components {
  .comp-pagination-seven {
    display: flex;
    justify-content: center;
    gap: var(--ds-component-pagination-seven-gap);
    margin-block-start: var(--ds-component-pagination-seven-margin-block-start);
    margin-block-end: var(--ds-component-pagination-seven-margin-block-end);
    border-top: 1px solid var(--ds-component-pagination-seven-color-border);
    padding-block-start: var(--ds-component-pagination-seven-padding-block);

    a {
      background-color: var(--ds-component-pagination-seven-color-background);
      border: 1px solid var(--ds-component-pagination-seven-color-border);
      color: var(--ds-component-pagination-seven-color-content);
      text-decoration: none;
      padding: var(--ds-component-pagination-seven-padding);
      border-radius: var(--ds-component-pagination-seven-radius);
      width: 1.75em;
      height: 1.75em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition:
        background-color 200ms ease-out,
        border-color 200ms ease-out,
        color 200ms ease-out;

      &:hover {
        background-color: var(
          --ds-component-pagination-seven-color-background-hover
        );
        border-color: var(--ds-component-pagination-seven-color-border-hover);
        color: var(--ds-component-pagination-seven-color-content-hover);
      }
    }

    a[aria-current="true"] {
      border-color: var(--ds-component-pagination-seven-color-border-current);
      color: var(--ds-component-pagination-seven-color-content-current);
      background-color: var(
        --ds-component-pagination-seven-color-background-current
      );
    }
  }
}