.app-c-message-action

scss
.app-c-message-action {
  border-top: solid 1px use-color(base, true-white);
  box-shadow: $box-shadow-card-lvl-1;
  display: flex;
  width: 100%;
  z-index: use-layer('base');
  // z-index: 1;
  
  @include element('item') {
    @include use-font('caption', 'light');
    background-color: use-color('grey', light);
    box-sizing: border-box;
    color: use-color(base, true-white);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 12px 8px;
    text-align: center;
    text-transform: uppercase;
    width: 50%;

    &:first-child {
      border-right: solid 1px use-color('grey', light-i);
    }

    [class^='icon-'],
    [class*=' icon-'] {
      font-size: 26px;
      margin-bottom: 4px;
    }
  }
}

Example

html
<div class="app-c-message-action">
  <a class="app-c-message-action__item">
    <span class="icon-chat-transfer"></span>
    Transferir
  </a>
  
  <a class="app-c-message-action__item">
    <span class="icon-typification"></span>
    Finalizar
  </a>
</div>

Requires

@mixin element()

@mixin use-font()

@function use-color()