@import '../../../../../sass/variables';

:host {
    --backgroundColor: #{$blue};
    --textColor: #{$bck-msg-sent};
    --hoverBackgroundColor: #{$bck-msg-sent};
    --hoverTextColor: #{$blue};
    --buttonFontSize: #{$button-in-msg-font-size};
}


.button-in-msg {

    padding: 8px 16px!important;
    position: relative;
    max-width: 300px;
    min-width: inherit;
    cursor: pointer;
    border: 1px solid var(--textColor); //$blue
    border-radius: 20px;
    margin: 3px;
    background: var(--backgroundColor);
    overflow: hidden;
    font-family: 'Muli', sans-serif;
    font-size: var(--buttonFontSize);
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.24px;
    -webkit-font-smoothing: antialiased;
    color: var(--textColor); //$blue
    line-height: 16px;
}

.text {
    // color: rgb(42, 106, 193);
    transition: background-color .6s ease;
    &:focus,
    &:hover {
        color: var(--hoverTextColor);
        background: var(--hoverBackgroundColor);
        .icon-button-action {
            svg {
                fill: $black;
            }
        }
    }
}
