$sophia_color: #9dd171;

.persona {
  @extend %card-style;
  color: color('white');

  .persona-header {
    display: inline-block;

    .persona-header-title {
      font-size: $font-size-large;
    }

    .persona-header-quote {
      font-size: $font-size-default;
      position: relative;
      background-color: color('white');
      padding:10px;
      border-radius: 10px;
      color: color('gray-600');
      margin: 0;

      &:after {
        position: absolute;
        display: block;
        content: "";
        border-color: transparent color('white') transparent transparent;
        border-style: solid;
        border-width: 20px 40px;
        height: 0;
        width: 0;
        position: absolute;
        top: 20px;
        left: -70px;
      }
    }
  }

  &.persona-sophia {
    background-color: $sophia_color
  }
}

.style-guide-persona-block {
  position: relative;
  color: color('white');

  .style-guide-persona-header {
    padding:20px;
  }

  .style-guide-persona-header-content {
    display: inline-block;
    width: 345px;
    padding-left: 20px;
    vertical-align: top;
    margin-left: 20px;
  }
}

.style-guide-persona-title {
  font-size: $font-size-large;
}

.quote-bubble {
  font-size: $font-size-default;
  position: relative;
  background-color: color('white');
  color: color('gray-600');
  padding:10px;
  border-radius: 10px;
  margin: 0;

  &:after {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent color('white') transparent transparent;
    border-style: solid;
    border-width: 20px 40px;
    height: 0;
    width: 0;
    position: absolute;
    top: 20px;
    left: -70px;
  }
}