@import "../css/colors"
@import "../css/vars"

:local(.callout)
  position: relative;
  font-family: $sansserif;
  font-size: 16px;
  background-color: $white
  color: $textGray
  padding: 10px 25px 10px 10px;
  border: solid 1px transparent;
  border-left: solid 3px transparent;
  margin-bottom: 2px
  min-height: 30px

  &:after
    z-index: 1001;
    position: absolute;
    right: -11px;
    top: 0;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 12px 0 0;
    border-color: $white transparent transparent;

:local(.callout.left)
  margin-left: 10px

  &:after
    left: -14px;
    border-width: 0 12px 16px 0;
    border-color: transparent $white transparent transparent;

:local(.label)
  font-family: $sansserif;
  font-size: 12px;
  margin: 0px;
  color: $textGray;
  // margin-bottom: 10px

:local(.actions)
  position: absolute;
  right: 5px
  top: 5px

:local(.callout.warning)
  border-color: $borderGray
  border-left-color: $yellow

  &:after
    display: none

:local(.callout.error)
  border-color: $borderGray
  border-left-color: $red

  &:after
    display: none

:local(.callout.info)
  border-color: $borderGray
  border-left-color: $blue

  &:after
    display: none

:local(.callout.success)
  border-color: $borderGray
  border-left-color: $green

  &:after
    display: none


:local(.callout.border)
  border: solid 1px $borderGray

  &:after
    right: -10px

  &:before
    z-index: 1000
    position: absolute
    right: -12px
    top: -1px
    content: ''
    width: 0
    height: 0
    border-style: solid
    border-width: 16px 12px 0 0;
    border-color: $borderGray transparent transparent transparent

:local(.callout.left.border)
  &:after
    left: -11px

  &:before
    left: -13px;
    border-width: 0 12px 16px 0;
    border-color: transparent $borderGray transparent transparent;