@procraft/widget-order/src/CourseItem/Sales/Sale/styles.ts

Order widget for landing

import styled from 'styled-components'
import { ButtonStyled } from '../../../components/Button/styles'
import { OldPriceStyled } from '../../../components/OldPrice/styles'

export const SaleStyled = styled.div<{
  bgColor?: string
}>`
  background-color: ${({ bgColor }) => bgColor ?? '#FFFFFF'};
  border: 1px solid #dae7f4;
  border-radius: 16px;
  width: 100%;
  margin-top: 13px;
  padding: 15px;
  display: flex;

  > .content {
    margin-left: 13px;

    .title {
      padding: 0;
      margin: 0 0 5px;
      font-weight: bold;
      font-size: 12px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #233d78;
    }

    .items {
      > .item {
        display: block;
        font-size: 14px;
        font-weight: 400;
        margin: 3px 0;

        .item--name {
          font-weight: 700;
        }
      }
    }
  }

  ${OldPriceStyled} {
    margin-top: 6px;
    font-size: 14px;
  }

  ${ButtonStyled} {
    &.buy-link {
      font-weight: 600;
      font-size: 14px;
      line-height: 140%;
      padding: 6px 10px;
      width: auto;
      margin-top: 10px;
    }
  }
`