@use '@funidata/fudis-core' as core;

fudis-pagination {
  display: flex;
  justify-content: center;
}

.fudis-pagination {
  display: flex;

  &-button {
    // Override default button styles from Core. These need !important flags in order to work properly in consuming app side.
    /* stylelint-disable-next-line declaration-no-important */
    padding-top: 0 !important;
    /* stylelint-disable-next-line declaration-no-important */
    padding-bottom: 0 !important;

    &__previous {
      margin-right: core.$spacing-xs;

      &__text-content {
        display: block;
      }

      &--collapsed {
        min-width: core.$spacing-xl;

        &__text-content {
          display: none;
        }
      }
    }

    &__next {
      margin-left: core.$spacing-xs;

      &__text-content {
        display: block;
      }

      &--collapsed {
        min-width: core.$spacing-xl;

        &__text-content {
          display: none;
        }
      }
    }
  }

  &-list {
    display: flex;
    align-items: baseline;
    margin: 0;
    padding-left: 0;
    list-style: none;

    &-item {
      display: inline-block;
      margin-right: core.$spacing-xxs;
      border-radius: 50%;
      width: core.$spacing-lg;
      height: core.$spacing-lg;
      /* stylelint-disable property-disallowed-list */
      font-size: core.$body-text-md-font-size;
      font-weight: core.$font-weight-medium;

      &-ellipsis {
        display: block;
        margin-right: core.$spacing-xxs;
        width: core.$spacing-lg;
        height: core.$spacing-lg;
        text-align: center;
      }

      &-link {
        @include core.text-color('primary');

        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        text-decoration: underline solid;
        overflow-wrap: anywhere;
        font-family: core.$font-family;

        &:focus {
          @include core.focus-generic;
        }
      }

      &--active {
        @include core.text-color('primary');
        @include core.border('2px', 'solid', 'primary');

        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        overflow-wrap: anywhere;
        font-family: core.$font-family;

        &:focus {
          @include core.focus-generic;
        }
      }
    }
  }
}