.rating {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 200px;
  min-width: 200px;

  > span {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    width: 20px;

    > * {
      pointer-events: none;
    }

    .dot {
      align-items: center;
      border: 1px solid;
      border-radius: 5px;
      color: black;
      display: flex;
      font-size: 12px;
      height: 10px; width: 10px;
      justify-content: center;

      &.filled {
        background-color: black;
      }
    }
  }
}