@use "../../../1-settings/class-vars";

#{class-vars.$base-class} {
  .pagination {
    ul {
      display: flex;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    &__link {
      border-radius: 999px;
      font-size: 1rem;
      height: var(--form-ele-medium);
      width: var(--form-ele-medium);
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-color: transparent;
      background: transparent;
      text-decoration: none;
      box-shadow: none;
      transition: transform 100ms ease, box-shadow 100ms ease;
    }
    a[href].pagination__link {
      color: var(--gray-color);
      &:hover {
        color: var(--gray-dark-color);
        background: var(--hover-gray-color);
        box-shadow: none;
      }
      &:active {
        transform: scale(.96);
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.5);
      }
      &--active {
        background: var(--primary-color);
        color: white;
        &:hover {
          background: var(--primary-color-dark);
          color: white;
        }
      }
    }
    &__ellipsis {
      font-size: 1rem;
      height: var(--form-ele-medium);
      width: var(--form-ele-medium);
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 10px;
      vertical-align: middle;
      .utds-icon-before-more-horizontal::before {
        margin-right: 0;
        display: block;
      }
    }
    &__next,
    &__prev {
      [class*=utds-icon-before-]::before {
        font-size: .9rem;
      }
    }
  }

}