.tui-expand {
  $expand-button-size: 12;
  @include font-size($expand-button-size);
  cursor: pointer;
  background: $text-color;
  text-align: center;
  display: none;
  margin: $margin-double 0;
  height: 1px;
  text-transform: uppercase;
  line-height: 1px;
  vertical-align: middle;
  overflow: visible;

  &.collapsed {
    display: block;

    &:before {
      content: attr(data-expand-text);
    }
  }

  &.expanded {
    display: block;

    &:before {
      content: attr(data-collapse-text);
    }
  }

  &:before {
    display: inline-block;
    background: $color-white;
    padding: $margin-normal $margin-double;
    margin-top: -($expand-button-size / 2) - $margin-normal;
    line-height: 1;
    vertical-align: middle;
  }
}