@use '../../base/token';
@use '../../abstract';

.cds-pagination {
  $this: &;

  padding: 12px 16px;
  font-size: token.$font-size-1;

  &__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--gray-500);
  }

  &__pc {
    display: none;
  }

  &__reduced-number em {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
  }

  @include abstract.media-bp-up('md') {
    padding: 13px 24px;

    &__pc {
      display: flex;
    }

    &--gather {
      #{$this}__inner {
        justify-content: center;
      }

      .cds-btn:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      .cds-btn:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      #{$this}__ellipsis {
        border: 1px solid var(--gray-200);
        border-left: none;
      }

      #{$this}__trigger {
        border: 1px solid var(--gray-200);
        border-left: none;
        

        &:last-of-type {
          border-right: none;
        }
      }

      &.cds-pagination--square #{$this}__trigger, &.cds-pagination--circle #{$this}__trigger {
        border-radius: 0;
      }
    }

    &__mobile {
      display: none;
    }

    &__trigger,
    &__ellipsis {
      $trigger-size: 40px;

      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding-inline: 10px;
      min-width: $trigger-size;
      height: $trigger-size;
    }

    &__trigger {
      cursor: pointer;

      &:hover,
      &.is-current {
        background-color: var(--gray-50);
      }

      &:disabled {
        cursor: default;
      }
    }

    &--square #{$this}__trigger {
      border-radius: 8px;
    }

    &--circle #{$this}__trigger {
      border-radius: 50%;
    }

    // pc 버전에서의 type별 여백
    &--default,
    &--minimal-center {
      padding: 20px 0;
    }
  }
}