$ribbon-color: $grey-darker !default
$ribbon-background-color: $white !default
$ribbon-border: .1rem solid $grey-lighter !default

// The ribbon sizes use mixins so they can be used at different breakpoints
=ribbon-small
  font-size: $size-small
=ribbon-medium
  font-size: $size-medium
=ribbon-large
  font-size: $size-large

.has-ribbon
  position: relative

.has-ribbon-left
  position: relative
  .ribbon
    right: auto
    left: 0
    border-left: none
    border-right: $ribbon-border

.has-ribbon-bottom
  position: relative
  .ribbon
    top: auto
    bottom: .5em

.ribbon
  background-color: $ribbon-background-color
  border: $ribbon-border
  border-right: none
  color: $ribbon-color
  font-size: $size-normal
  justify-content: center
  padding-left: 0.75em
  padding-right: 0.75em
  text-align: center
  white-space: nowrap
  position: absolute
  top: .5em
  right: 0
  font-weight: 400
  z-index: 2
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}:not(.is-outlined)
      background-color: $color
      border-color: transparent
      color: $color-invert !important
    &.is-#{$name}
      &.is-outlined
        background-color: transparent
        border-color: $color

.ribbon span
  position: absolute
  display: block
  width: 100px
  padding: 5px 0
  background-color: #ffdd57
  box-shadow: 0 5px 10px rgba(0,0,0,.1)
  text-shadow: 0 1px 1px rgba(0,0,0,.2)
  text-align: center

.corner-top-left-ribbon
  top: -22px
  left: -2px

.corner-top-left-ribbon span
  top: 30px
  left: -25px
  transform: rotate(-45deg)

  // Sizes
  &.is-small
    +ribbon-small
  &.is-medium
    +ribbon-medium
  &.is-large
    +ribbon-large
  &.is-outlined
    background-color: transparent
