.message {
    text-align: left;
    background-color: var(--default-white);
    border: var(--border-xs) solid;
    border-radius: var(--button-border-radius);
    box-sizing: border-box;
    box-shadow: 0px 2px 4px 0px rgba(65, 65, 65, .5);
    display: block;
    margin-top: var(--margin-l)
}

.message.message--no-shadow {
    box-shadow: none
}

.message.message--max-width {
    max-width: 640px
}

.message--info {
    background: var(--message-info-background-color);
    border-color: var(--message-info-border-color)
}

.message--info .message__item-icon {
    color: var(--message-info-icon-color)
}

.message--info .message__item-icon:before {
    content: ""
}

.message--warning {
    background: var(--message-warning-background-color);
    border-color: var(--message-warning-border-color)
}

.message--warning .message__item-icon {
    color: var(--message-warning-icon-color)
}

.message--warning .message__item-icon:before {
    content: ""
}

.message--error {
    background: var(--message-error-background-color);
    border-color: var(--message-error-border-color)
}

.message--error .message__item-icon {
    color: var(--message-error-icon-color)
}

.message--error .message__item-icon:before {
    content: ""
}

.message--success {
    background: var(--message-success-background-color);
    border-color: var(--message-success-border-color)
}

.message--success .message__item-icon {
    color: var(--message-success-icon-color)
}

.message--success .message__item-icon:before {
    content: ""
}

.message__item-icon {
    font-size: var(--heading-05-font-size);
    height: var(--size-m);
    width: var(--size-m);
    margin-right: var(--size-s)
}

@media (max-width: 779px) {
    .message__item-icon {
        display: inline-flex;
        float: left;
        height: var(--size-m);
        margin-right: var(--margin-s)
    }
}

.message__content {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: var(--size-m) var(--size-m);
    letter-spacing: var(--size-5xs)
}

@media (max-width: 779px) {
    .message__content {
        display: block;
        padding: var(--size-m) var(--size-m)
    }
}

.message__content .copy {
    align-self: flex-end;
    flex: 1;
    display: inline;
    margin: var(--margin-xxxs);
    line-height: var(--paragraph-03-line-height);
    hyphens: auto;
    word-break: break-word
}

.message__content .copy b, .message__content .copy strong {
    line-height: 1
}

.message__content .message__list {
    width: 100%;
    padding: var(--size-5xs);
    list-style: none
}

.message__content .message__list .icon {
    color: var(--success);
    position: relative
}

.message__content .message__list .message__list-item {
    display: flex;
    line-height: var(--size-m);
    font-size: var(--font-size);
    margin-top: var(--size-s)
}

.message__content .message__list .message__list-item--disabled {
    color: var(--grey-1)
}

.message__content .message__list .message__list-item--disabled .icon {
    color: var(--grey-3)
}

.message__content .message__item {
    display: inline-block
}

.message__content .message__item .icon {
    float: left;
    position: relative
}

.message__content .message__item:first-child {
    width: calc(100% - 158px);
    margin-right: var(--size-2xs)
}

.message__content .message__item + .message__item {
    width: 150px
}

.message__content .message__item + .message__item .message__action-link {
    cursor: pointer;
    display: inline-flex;
    max-width: 100%;
    color: var(--grey-3);
    position: relative;
    outline: 0
}

.message__content .message__item + .message__item .message__action-link:focus::before {
    outline: 0
}

[data-whatinput=keyboard] .message__content .message__item + .message__item .message__action-link:focus::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    transition: color .2s ease, outline .2s ease;
    border-radius: var(--accessibility-border-radius);
    outline: var(--accessibility-border) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-space-border)
}

.message__content .message__item + .message__item .icon--arrow-right {
    width: var(--size-m);
    height: var(--size-m);
    font-size: var(--heading-05-font-size);
    margin-right: var(--size-2xs)
}

.message__content .message__item + .message__item .message__item-text {
    font-weight: 600;
    line-height: var(--size-m);
    font-size: var(--paragraph-03-font-size)
}

@media (max-width: 779px) {
    .message__content .message__item:first-child {
        margin: 0;
        width: 100%;
        display: block
    }

    .message__content .message__item + .message__item {
        width: 100%;
        margin-top: var(--size-2xs)
    }
}

.message__action-icon {
    outline: none;
    display: inline-block;
    height: var(--size-m) var(--size-3xs);
    width: var(--size-m) var(--size-3xs);
    font-size: var(--heading-05-font-size);
    color: var(--interactive-primary);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    cursor: pointer;
    position: absolute;
    margin-left: auto;
    padding: 0;
    top: var(--size-s);
    right: var(--size-s)
}

.message__action-icon:focus {
    outline: none
}

[data-whatinput=keyboard] .message__action-icon:focus {
    content: ""
}

[data-whatinput=keyboard] .message__action-icon:focus::before {
    outline: none;
    position: absolute;
    top: -var(--size-4xs);
    left: -var(--size-4xs);
    width: var(--size-m) var(--size-3xs);
    height: var(--size-m) var(--size-3xs);
    transition: color .2s ease, outline .2s ease;
    border-radius: var(--accessibility-border-radius);
    outline: var(--accessibility-border) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-space-border)
}

.message__action-icon::-moz-focus-inner {
    border: 0
}

.message--mobile-float {
    margin: var(--size-s) var(--size-2xs)
}

@media (max-width: 779px) {
    .message--mobile-float {
        z-index: var(--z-index-dialog);
        position: fixed;
        bottom: var(--size-2xs);
        left: var(--size-2xs);
        right: var(--size-2xs);
        width: auto;
        margin: var(--size-5xs)
    }
}