.tag
  background-color: $red
  border-radius: 2px
  color: #fff
  padding: 0.25em 0.5em 0.375em

.box
  border: 2px solid $text
  border-radius: 3px
  position: relative
  &:before
    background: $text
    border-radius: 1px 0 2px 0
    color: #fff
    content: ""
    display: inline-block
    font-size: 0.8em
    padding: 0 6px 2px 4px
    vertical-align: top
.box--red
  border-color: $red
  &:before
    background: $red
.box--green
  border-color: $green
  &:before
    background: $green
.box--plum
  border-color: $plum
  &:before
    background: $plum
.box--alpha
  border-color: $alpha
  &:before
    background: $alpha
    color: $alpha-invert

.line
  background: $text
  height: 1px
  position: relative
  &:before
    background: $text
    border-radius: 2px
    color: #fff
    content: "Line"
    display: inline-block
    font-size: 10px
    height: 15px
    line-height: 15px
    margin-top: -6px
    padding: 0 4px
    vertical-align: top
.line--red
  background: $red
  &:before
    background: $red

.square
  align-items: center
  background: $border
  border-radius: 3px
  color: $text
  display: flex
  height: 75px
  justify-content: center
  line-height: 1.2
  padding: 0
  text-align: center
  width: 75px
.square--plum
  background: $plum
  color: $plum-invert
  &:before
    background: $plum
.square--alpha
  background: $alpha
  color: $plum
  &:before
    background: $alpha
.square--pink
  background: $pink
  color: #fff
  &:before
    background: $pink

.block
  background: $background
  border-radius: 3px
  color: $text
  display: block
  line-height: 1.2
  padding: 1em
  strong
    color: inherit
.block--alpha
  background: $alpha
  color: $plum
.block--beta
  background: $beta
  color: $plum
.block--pink
  background: $pink
  color: $plum
.block--plum
  background: $plum
  color: #fff
.block--yellow
  background: $yellow
  color: $plum
.block--orange
  background: $orange
  color: $plum
.block--green
  background: $green
  color: $plum
.block--turquoise
  background: $turquoise
  color: $plum
.block--blue
  background: $blue
  color: $plum
.block--purple
  background: $purple
  color: $plum
.block--red
  background: $red
  color: $plum

.natural,
.actual
  +center
  border-radius: 3px
  line-height: 1.2
  padding: 0.8em 1em

.natural
  border: 2px dotted $red
  color: $red

.actual
  +center
  background: $alpha
  border: 2px solid $alpha
  color: $plum

.emoji
  font-size: 1.25em
  vertical-align: middle

.bsa-shadow
  background: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
  display: block
  height: 1rem
  left: 0
  opacity: 0
  pointer-events: none
  position: absolute
  right: 0
  top: 42px
  transform-origin: center top

.bsa-cpc
  background-color: #fff
  font-size: 16px
  line-height: 1.4
  padding: 10px
  text-align: center
  & > div
    +center
  .default-ad
    background-color: $primary
    border-radius: 2px
    color: $primary-invert
    font-size: 12px
    order: 2
    margin-left: 10px
    padding: 0 4px
    text-transform: uppercase
  a._default_
    +center
    flex-wrap: wrap
    min-height: 20px
    order: 1
    &:hover
      text-decoration: underline
  .default-image
    +center
    height: 20px
    padding-right: 10px
    img
      height: 20px
  .default-title
    padding-right: 5px
    &:after
      content: " — "

+mobile
  .bsa-cpc
    border-top: 1px solid $border

+desktop
  .properties--single
    padding-top: 42px
  .bsa-cpc
    min-height: 42px
  .ola .bsa-cpc,
  .alo.is-fixed .bsa-cpc
    left: $menu-width
    position: fixed
    right: 0
    top: 0
  .alo
    min-height: 42px