.readmore__button
  display: inline-block
  position: relative
  margin-bottom: rem(12)
  padding: rem(7) rem(30) rem(7) 0
  font-size: $paragraph-font-size
  color: $grey-dark

  &:after
    content: ''
    display: inline-block
    position: absolute
    top: rem(15)
    right: rem(10)
    +triangle(rem(10), currentColor, down)

  &:hover
    color: $primary-color

// ----------------------------------------------------------
// STATES
// ----------------------------------------------------------
.readmore--closed
  display: none

.readmore--opened

  + .readmore__button
    &:after
      border-top: 0
      border-left-color: transparent
      border-right-color: transparent
      border-bottom: rem(5) solid currentColor

    &:hover:after
      border-bottom-color: $primary-color