@use '../../_styles/mixin.scss' as *;

.o-rate {
  display: inline-flex;
  align-items: center;
  user-select: none;
  font-size: var(--rate-size);
  cursor: pointer;
}

.o-rate-readonly {
  cursor: auto;
}

.o-rate-item {
  position: relative;

  &.is-half {
    .o-rate-icon-top {
      svg {
        > *:nth-child(2) {
          color: var(--rate-color-selected);
        }
      }
    }
  }

  &.is-full {
    .o-rate-icon-bottom {
      svg {
        > * {
          color: var(--rate-color-selected);
        }
      }
    }
  }

  & + .o-rate-item {
    margin-left: var(--rate-gap);
  }
}

.o-rate-icon {
  svg {
    > * {
      transition: all var(--o-duration-m1) var(--o-easing-standard);
    }
  }
}

.o-rate-icon-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;

  svg {
    color: transparent;
  }
}

.o-rate-icon-bottom {
  svg {
    color: transparent;

    > *:nth-child(1) {
      color: var(--rate-color);
    }
  }
}

.o-rate-popover {
  border-radius: var(--rate-popover-radius);

  .o-popover-body {
    color: var(--rate-popover-color);
    font-size: var(--rate-popover-text-size);
    line-height: var(--rate-popover-text-height);
    padding: var(--rate-popover-padding);
    min-width: auto;
  }
}