@import '../../common/style/smoba/layout.scss';
@import '../../common/style/smoba/mixin.scss';

.press-pagination {
  position: fixed;
  right: 0;
  bottom: 10.00px;
  display: flex;
  flex-wrap: wrap-reverse;
  z-index: 6;

  ::v-deep .uni-scroll-view-content {
    display: flex;
    flex-direction: column;
  }

  &--safe {
    bottom: calc(10px + constant(safe-area-inset-bottom));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  &__wrap {
    position: relative;
    width: fit-content;
    height: 232.00px;
    display: flex;
    justify-content: flex-end;
    padding-right: 10.00px;

    &--padding {
      padding-left: 30.00px;
    }
  }
}



.press-scrollbar {
  display: flex;
  flex-direction: column;
  background: $color-gray-3;
  border-radius: 12.00px;
  overflow-y: auto;
  height: 100%;
  width: 12.00px;

  &--active {
    border-radius: 20.00px;
    width: 30.00px;

    .press-scrollbar__scale {
      opacity: 1;
      border-radius: 20.00px;
    }
  }

  &__scale {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 40.00px;
    font-weight: 600;
    font-size: $font-xxs;
    color: $color-gray;
    text-align: center;
    border-radius: 12.00px;
    opacity: 0;

    &--selected {
      color: $color-white ;
      opacity: 1;
      background: $color-blue-1;
    }

    &--total-1 {
      height: 100%;
    }

    &--total-2 {
      height: 50%;
    }

    &--total-3 {
      height: 33.33333333%;
    }

    &--total-4 {
      height: 25%;
    }

    &--total-5 {
      height: 20%;
    }
  }
}