@procraft/widget-order/src/CourseItem/Reviews/ReviewsPopup/Stats/styles.ts

Order widget for landing

import styled from 'styled-components'
import { ProgressBarStyled } from '../ProgressBar/styles'

export const ReviewsStatsStyled = styled.div`
  /* border: 1px solid; */

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  user-select: none;

  font-size: 13px;
  color: #1f63a7;

  .stat-key {
    cursor: pointer;

    &:hover {
      color: #fff;

      .stat-key-wrapper {
        background: #1f93a7;
      }
    }

    &--active {
      color: #fff;

      .stat-key-wrapper {
        background: #1f63a7;
      }
    }

    &-wrapper {
      display: inline-flex;
      padding: 1px 3px;
      border-radius: 5px;
    }
  }

  /*
  2 columns
*/
  > div {
    /* border: 1px solid grey; */

    /* display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  */
    /* flex: 1; */

    display: grid;
    /* grid-template-rows: auto; */
    grid-template-rows: auto;
    grid-template-columns: 1.3fr 1fr 30px;
    grid-row-gap: 10px;

    /* white-space: nowrap; */

    /* width: 100%; */
    margin-bottom: 10px;

    ${ProgressBarStyled} {
      margin: 0 5px;
      max-width: 100%;
    }

    @media (min-width: 700px) {
      /* width: 50%; */

      ${ProgressBarStyled} {
        /* max-width: 100px; */
      }
    }

    &:nth-child(1) {
      flex: 0;

      white-space: nowrap;

      flex-basis: 100%;

      @media (min-width: 700px) {
        flex-basis: 45%;
        padding-right: 20px;
      }
    }

    &:nth-child(2) {
      flex: 1;
    }

    /*
    Row
  */
    /* > div {
  } */
  }
`