/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

.spectrum-InLineAlert {
    /* Font */
    --spectrum-inlinealert-heading-font-family: var(
        --spectrum-sans-font-family-stack
    );
    --spectrum-inlinealert-heading-font-weight: var(
        --spectrum-heading-sans-serif-font-weight
    );
    --spectrum-inlinealert-heading-font-style: var(
        --spectrum-heading-sans-serif-font-style
    );
    --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs);
    --spectrum-inlinealert-heading-line-height: var(
        --spectrum-heading-line-height
    );
    --spectrum-inlinealert-content-font-family: var(
        --spectrum-sans-font-family-stack
    );
    --spectrum-inlinealert-content-font-weight: var(
        --spectrum-body-sans-serif-font-weight
    );
    --spectrum-inlinealert-content-font-style: var(
        --spectrum-body-sans-serif-font-style
    );
    --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s);
    --spectrum-inlinealert-content-line-height: var(
        --spectrum-body-line-height
    );

    /* Size */
    --spectrum-inlinealert-border-width: var(--spectrum-border-width-200);
    --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100);
    --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100);
    --spectrum-inlinealert-min-inline-size: var(
        --spectrum-in-line-alert-minimum-width
    );
    --spectrum-inlinealert-header-min-block-size: var(
        --spectrum-component-height-50
    );

    /* Spacing */
    --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400);
    --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400);
    --spectrum-inlinealert-spacing-header-content-button: var(
        --spectrum-spacing-300
    );

    /* Color */
    --spectrum-inlinealert-background-color: var(
        --spectrum-background-layer-2-color
    );
    --spectrum-inlinealert-border-and-icon-color: var(
        --spectrum-neutral-visual-color
    );
    --spectrum-inlinealert-header-color: var(--spectrum-heading-color);
    --spectrum-inlinealert-content-color: var(--spectrum-body-color);
    --spectrum-inlinealert-border-and-icon-color-info: var(
        --spectrum-informative-visual-color
    );
    --spectrum-inlinealert-border-and-icon-color-positive: var(
        --spectrum-positive-visual-color
    );
    --spectrum-inlinealert-border-and-icon-color-notice: var(
        --spectrum-notice-visual-color
    );
    --spectrum-inlinealert-border-and-icon-color-negative: var(
        --spectrum-negative-visual-color
    );
}

.spectrum-InLineAlert {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    min-inline-size: var(
        --mod-inlinealert-min-inline-size,
        var(--spectrum-inlinealert-min-inline-size)
    );
    padding-block: var(
        --mod-inlinealert-spacing-edge-to-text,
        var(--spectrum-inlinealert-spacing-edge-to-text)
    );
    padding-inline: var(
        --mod-inlinealert-spacing-edge-to-text,
        var(--spectrum-inlinealert-spacing-edge-to-text)
    );
    border-block-width: var(
        --mod-inlinealert-border-width,
        var(--spectrum-inlinealert-border-width)
    );
    border-inline-width: var(
        --mod-inlinealert-border-width,
        var(--spectrum-inlinealert-border-width)
    );
    border-style: solid;
    border-radius: var(
        --mod-inlinealert-border-radius,
        var(--spectrum-inlinealert-border-radius)
    );
    background-color: var(
        --highcontrast-inlinealert-background-color,
        var(
            --mod-inlinealert-background-color,
            var(--spectrum-inlinealert-background-color)
        )
    );
    border-color: var(
        --highcontrast-inlinealert-border-and-icon-color,
        var(
            --mod-inlinealert-border-and-icon-color,
            var(--spectrum-inlinealert-border-and-icon-color)
        )
    );
}

@media (forced-colors: active) {
    .spectrum-InLineAlert {
        --highcontrast-inlinealert-background-color: Background;
        --highcontrast-inlinealert-header-color: CanvasText;
        --highcontrast-inlinealert-content-color: CanvasText;
        --highcontrast-inlinealert-border-and-icon-color: ButtonBorder;
    }
}

.spectrum-InLineAlert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Minimum space between header and icon */
    gap: var(
        --mod-inlinealert-spacing-header-to-icon,
        var(--spectrum-inlinealert-spacing-header-to-icon)
    );
    font-weight: var(
        --mod-inlinealert-heading-font-weight,
        var(--spectrum-inlinealert-heading-font-weight)
    );
    font-family: var(
        --mod-inlinealert-heading-font-family,
        var(--spectrum-inlinealert-heading-font-family)
    );
    font-style: var(
        --mod-inlinealert-heading-font-style,
        var(--spectrum-inlinealert-heading-font-style)
    );
    font-size: var(
        --mod-inlinealert-heading-font-size,
        var(--spectrum-inlinealert-heading-font-size)
    );
    line-height: var(
        --mod-inlinealert-heading-line-height,
        var(--spectrum-inlinealert-heading-line-height)
    );
    text-transform: none;
    min-block-size: var(
        --mod-inlinealert-header-min-block-size,
        var(--spectrum-inlinealert-header-min-block-size)
    );
    color: var(
        --highcontrast-inlinealert-header-color,
        var(
            --mod-inlinealert-header-color,
            var(--spectrum-inlinealert-header-color)
        )
    );
}

.spectrum-InLineAlert-content {
    display: block;
    margin-block-start: var(
        --mod-inlinealert-spacing-header-content-button,
        var(--spectrum-inlinealert-spacing-header-content-button)
    );
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding: 0;
    word-wrap: break-word;
    font-weight: var(
        --mod-inlinealert-content-font-weight,
        var(--spectrum-inlinealert-content-font-weight)
    );
    font-family: var(
        --mod-inlinealert-content-font-family,
        var(--spectrum-inlinealert-content-font-family)
    );
    font-style: var(
        --mod-inlinealert-content-font-style,
        var(--spectrum-inlinealert-content-font-style)
    );
    font-size: var(
        --mod-inlinealert-content-font-size,
        var(--spectrum-inlinealert-content-font-size)
    );
    line-height: var(
        --mod-inlinealert-content-line-height,
        var(--spectrum-inlinealert-content-line-height)
    );
    color: var(
        --highcontrast-inlinealert-content-color,
        var(
            --mod-inlinealert-content-color,
            var(--spectrum-inlinealert-content-color)
        )
    );
}

.spectrum-InLineAlert--negative {
    border-color: var(
        --highcontrast-inlinealert-border-and-icon-color,
        var(
            --mod-inlinealert-border-and-icon-color-negative,
            var(--spectrum-inlinealert-border-and-icon-color-negative)
        )
    );

    .spectrum-InLineAlert-icon {
        color: var(
            --highcontrast-inlinealert-border-and-icon-color,
            var(
                --mod-inlinealert-border-and-icon-color-negative,
                var(--spectrum-inlinealert-border-and-icon-color-negative)
            )
        );
    }
}
