$prefix: "adui-channels-pagination";

.#{$prefix} {
  &-base {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
  }
  &-left {
    justify-content: flex-start;
  }
  &-center {
    justify-content: center;
  }
  &-right {
    justify-content: flex-end;
  }
  &-text {
    display: inline-block;
    margin-left: 12px;
    margin-right: 12px;
  }
  &-input {
    margin-left: 40px;
    margin-right: 16px;
    width: 44px;
    height: 24px;
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.04);
    border: none;
    border-radius: 4px;
    outline: none;

    &-btn {
      font-size: 14px;
      color: #576b95;
      cursor: pointer;
    }
  }
  &-btn {
    min-width: 0;
    width: 32px;
    height: 32px;
    font-size: 0;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCBmaWxsLW9wYWNpdHk9Ii4wNCIgeD0iMSIgeT0iMSIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iMTYiLz48cGF0aCBkPSJNMTguOSAxMy4wMzJsLTMuODM2IDMuODM2IDMuODM1IDMuODM1LTEuMDMxIDEuMDMyTDEzIDE2Ljg2OCAxNy44NjggMTJsMS4wMzEgMS4wMzJ6IiBmaWxsLXJ1bGU9Im5vbnplcm8iIG9wYWNpdHk9Ii41Ii8+PC9nPjwvc3ZnPg==)
      no-repeat 50% / contain;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
      background-color: #ebebeb;
    }

    &-right {
      transform: scaleX(-1);
    }
  }
}