@use 'sass:math';

.ons-message {
    border-radius: math.div($grid-gutters, 2);
    margin-bottom: 2rem;
    outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background

    &--sent {
        background: var(--ons-color-info-tint);

        @include mq(m) {
            margin-left: 4rem;
        }
    }

    &--received {
        background: var(--ons-color-success-tint);

        @include mq(m) {
            margin-right: 4rem;
        }
    }

    &__head {
        border-bottom: 1px solid var(--ons-color-borders);
        padding: $grid-gutters;
        position: relative;
    }

    &__metadata {
        margin: 0;

        @include mq(m) {
            width: 65%;
        }
    }

    &__term,
    &__value {
        display: inline-block;
        margin: 0;
    }

    &__unread-link {
        @include mq(m) {
            position: absolute;
            right: 1rem;
            top: 1rem;
        }
    }

    &__body {
        padding: $grid-gutters;
    }
}