@import '../../src/style/tools.css';

.bx-rate-wrapper {
  line-height: normal;

  & .bx-rate-content {
    &.bx-rate-right {
      white-space: nowrap;

      & .bx-rate-label {
        margin-right: 6px;
        font-size: 15px;
      }

      & .bx-rate-star-wrapper {
        display: inline-block;

        & .bx-rate-star {
          display: flex;

          & .bx-rate-star-li {
            position: relative;
            display: inline-block;
            flex: 1;
            text-align: center;

            & .bx-rate-star-li-wrapper {
              display: inline-block;
              position: relative;

              & .bx-rate-star-li-icon {
                pointer-events: none;

                &.bx-rate-star-li-icon--opacity {
                  opacity: 0;
                }
              }

              & .bx-rate-star-li-clipper {
                display: block;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;
                pointer-events: none;
              }
            }
          }
        }
      }

      & .bx-rate-number {
        margin-left: 8px;
        font-size: 15px;
      }

      & .bx-rate-text {
        margin: 12px 0 0 8px;
        font-size: 13px;
        color: var(--color-text-patch);
      }
    }

    &.bx-rate-bottom {
      text-align: center;

      & .bx-rate-header {
        margin-bottom: 5px;
        font-size: 24px;
        font-weight: normal;
      }

      & .bx-rate-star {
        & .bx-rate-star-li {
          position: relative;
          display: inline-block;
          vertical-align: middle;
          margin: 0 7px;

          & .bx-rate-star-li-icon {
            pointer-events: none;

            &.bx-rate-star-li-icon--opacity {
              opacity: 0;
            }
          }

          & .bx-rate-star-li-clipper {
            display: block;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            pointer-events: none;
          }
        }
      }

      & .bx-rate-text {
        margin-top: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }

      & .bx-rate-tag {
        & .bx-rate-tag-li {
          display: inline-block;
          margin: 20px 9px 0 0;
          padding: 5px 18px;
          font-size: 13px;
          border: 1px solid var(--color-text-assist);
          border-radius: 70px;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
