@use 'sass:color';

// ------ Colors ------------

$portrait-bg: #efefef;

$postbox1-fg: white;
$postbox1-bg: #b65fcf;
$postbox2-fg: black;
$postbox2-bg: #b7e8c1;

// --------------------------

.disclaimer {
    font-variant: small-caps;
    font-style: italic;
    text-align: justify;
}

.emph {
    font-weight: bold;
}

.talker {
    position: relative;
    border-radius: 5pt;
    padding: 1ex;
}

.portrait {
    display: block;
    position: absolute;
    content: '';

    background: $portrait-bg url('images/avatar.svg') center/60% no-repeat scroll;
    border-radius: 50%;
    border: .5px solid color.scale($portrait-bg, $blackness: 30%);

    top: 50%;
    margin-top: -25px;
    height: 50px;
    width: 50px;
}

.talker-sx {
    @extend .talker;
    background-color: $postbox1-bg;
    border: .5px solid color.scale($postbox1-bg, $blackness: 30%);
    color: $postbox1-fg;
    margin-right: 10em;

    &::before {
        @extend .portrait;
        left: 100%;
        margin-left: .5em;
    }
}

.talker-dx {
    @extend .talker;

    background-color: $postbox2-bg;
    border: .5px solid color.scale($postbox2-bg, $blackness: 30%);
    color: $postbox2-fg;
    margin-left: 10em;

    &::before {
        @extend .portrait;
        right: 100%;
        margin-right: .5em;
    }
}