.gui-conversation-context {
  &__label {
    font-size: $typo-size-lead;
    font-weight: $typo-weight-semi-bold;
    line-height: $typo-line-height-base * 1.2;
    text-align: right;
    margin-top: $layout-spacing-base*2 - $layout-spacing-base*0.5;
  }

  &__context {
    background: $neutral-lightest;
    margin: $layout-spacing-base*0.5 0;
    padding: $layout-spacing-base;
    width: 100%;
    position: relative;

    &::before {
      content: ' ';
      border-left: 2px solid $color-border-base;
      position: absolute;
      top: 100%;
      height: 17px;
      left: 50%;
    }

    span {
      background-color: $primary-yellow-lighter;
      font-size: $typo-size-lead;
      line-height: $typo-line-height-base * 1.2;
      font-weight: $typo-weight-roman;
    }

    .gui-figure--highlighted,
    .gui-figure--active {
      &:hover {
        cursor: default;
      }
    }
  }

  &__conversation {
    margin: $layout-spacing-base 0 0 0;
  }
}