* {
    box-sizing: border-box;
}

*:active {
    outline: none;
}

*:focus {
    outline: none;
    box-shadow: var(--const-global-focus);
}

input,
button {
    font-family: inherit;
    font-size: inherit;
}

.sr,
.sr button {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.hidden,
[hidden] {
    display: none;
}

.invisible {
    visibility: hidden;
}


:host {
    display: block;
    background: var(--app-gray-l3);
}

:host([hidden]) {
    display: none;
}

.message {
    border-left-width: var(--tct-message-bar-width, var(--app-scale-1, 5px));
    border-left-style: solid;
    display: flex;
    align-items: flex-start;
    color: var(--tct-message-font-color, inherit);
}

::slotted(ul) {
    padding-left: var(--tct-scale-l3, var(--app-scale-3, 15px));
}

:host(:not([appearance])),
:host([appearance='standard']) {
    margin: var(--tct-scale-l3, var(--app-scale-3, 15px)) 0;
}

:host(:not([appearance])) .message,
:host([appearance='standard']) .message {
    padding: var(--tct-message-padding, var(--app-scale-3, 15px));
}

:host(:not([appearance])) ::slotted(ul),
:host([appearance='standard']) ::slotted(ul) {
    margin: var(--tct-scale-l3, var(--app-scale-3, 15px)) 0;
}

:host([appearance='minimal']) {
    margin: 0;
}
:host([appearance='minimal']) .message {
    padding: var(--tct-message-minimal-padding, var(--app-scale-2, 10px));
}
:host([appearance='minimal']) ::slotted(ul) {
    margin: var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
}

:host(:not([type])) .message,
:host([type='info']) .message {
    border-left-color: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
}

:host(:not([type])) .message-icon,
:host([type='info']) .message-icon {
    --tct-icon-stroke-primary: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
    --tct-icon-stroke-secondary: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
    color: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
}

:host([type='success']) .message {
    border-left-color: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
}

:host([type='success']) .message-icon {
    --tct-icon-stroke-primary: var(
        --tct-stoplight-success,
        var(--const-stoplight-success, #0e8a00)
    );
    --tct-icon-stroke-secondary: var(
        --tct-stoplight-success,
        var(--const-stoplight-success, #0e8a00)
    );
    color: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
}

:host([type='warning']) .message {
    border-left-color: var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));
}
:host([type='warning']) .message-icon {
    --tct-icon-stroke-primary: var(
        --tct-stoplight-warning,
        var(--const-stoplight-warning, #f0b400)
    );
    --tct-icon-stroke-secondary: var(
        --tct-stoplight-warning,
        var(--const-stoplight-warning, #f0b400)
    );
    color: var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));
}

:host([type='error']) .message,
:host([type='danger']) .message {
    border-left-color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
}

:host([type='error']) .message-icon,
:host([type='danger']) .message-icon {
    --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
    --tct-icon-stroke-secondary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
    color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
}

.message-icon {
    width: 24px;
    margin-top: calc(var(--tct-scale-1, var(--app-scale-1, 5px)) * -1);
    margin-right: var(--tct-scale-1, var(--app-scale-1, 5px));
    margin-left: calc(var(--tct-scale-2, var(--app-scale-2, 10px)) * -1);
}

.message-content {
    flex: 1;
}