$_s-pagination-component-inited: false;
@mixin s-pagination-component-init() {
  @if not $_s-pagination-component-inited {
    $_s-pagination-component-inited: true !global;

    // input
    %s-pagination-container-bare {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    %s-pagination-bare {
      top: 50%;
      left: 50%;
      @include s-translate(-50%, -50%);
      transform-origin: 50% 50%;
      @include s-ratio(1);
      position: absolute;
      width: 100%;
      border-radius: 50%;
    }
  }
}

@mixin s-pagination($colors: null) {
  @include s-pagination-bare();
  @if $colors {
    @include s-pagination-style($colors: $colors);
  }
}

@mixin s-pagination-component-bare() {
  @include s-pagination-component-init();
  @include s-selector-method(WEBCOMPONENT) {
    @include s-component("s-pagination") {
      #{s-component-selector()} {
        display: block;
        user-select: none;
      }
      #{s-component-selector('item')} {
        display: inline-block;
        border-radius: s-lnf(border-radius);
        padding: s-lnf(padding-horizontal) s-lnf(padding-vertical);
        height: 1em + s-lnf(padding-horizontal) * 2;
        line-height: 1;
        margin-right: s-lnf(padding-vertical) * 0.5;
        cursor: pointer;

        &:last-of-type() {
          margin-right: 0;
        }
      }
      #{s-component-selector('item', null, 'disabled')} {
        opacity: 0.3;
        pointer-events: none;
      }
    }
  }
}
@mixin s-pagination-component-style($colors) {
  @include s-selector-method(WEBCOMPONENT) {
    @include s-component("s-pagination") {
      @each $color in $colors {
        #{s-component-selector(null, $color, null, 'color')} {
          #{s-component-selector('item')} {
            color: s-color($color);
            background: s-color($color, -opacity 0.1);
            @include s-transition(fast);

            &:hover {
              background: s-color($color, -opacity 0.2);
              @include s-depth(2);
            }
            &#{s-component-selector('&', null, 'active')},
            &.active {
              background: s-color($color);
              color: white;
            }
          }
        }
      }
    }
  }
}