/*------------------------------------*\
    #WARNING TEXT
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

/// [1] compensate for border
.ds_warning-text {
    border: 0.0625rem solid currentColor;
    border-width: 0.0625rem 0;
    font-weight: settings.$bold;
    padding-left: 4rem;
    padding-right: 1rem;
    position: relative;

    @include helpers.ds_block-margins;
    @include helpers.ds_last-child-no-margin;
    @include helpers.ds_responsive-padding(3, top, false, -0.0625rem); /// 1
    @include helpers.ds_responsive-padding(3, bottom, false, -0.0625rem); /// 1

    &:first-child {
        margin-top: 0;
    }
}

.ds_warning-text__icon {
    $warning-text-icon-size: 2.125rem;
    height: $warning-text-icon-size;
    left: 0.9375rem;
    line-height: 1;
    position: absolute;
    top: 1.0625rem;
    width: $warning-text-icon-size;

    /** legacy support for users who are not using markup with a SVG icon **/
    &:not(:has(svg)) {
        display: inline-block;

        &::before {
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%' viewBox='0 -960 960 960' width='100%' fill='%231a1a1a'%3E%3Cpath d='m40-120 440-760 440 760H40Zm468.5-131.5Q520-263 520-280t-11.5-28.5Q497-320 480-320t-28.5 11.5Q440-297 440-280t11.5 28.5Q463-240 480-240t28.5-11.5ZM440-360h80v-200h-80v200Z'/%3E%3C/svg%3E");
            display: inline-block;
            height: 100%;
            width: 100%;
        }

        @include helpers.ds_media-query-high-contrast {
            width: 0;
            height: 0;
            border-left: 1rem solid background;
            border-right: 1rem solid background;
            border-bottom: 1.75rem solid currentColor;

            &::before,
            &::after {
                background-color: background;
                content: '';
                left: -0.125rem;
                position: absolute;
                width: 0.25rem;
            }

            &::before {
                background-image: none;
                height: 0.475rem;
                top: 0.6875rem;
            }

            &::after {
                height: 0.1875rem;
                border-radius: 0.125rem;
                top: 1.3125rem;
            }
        }
    }
}

.ds_warning-text__text {
    @include helpers.ds_last-child-no-margin;
}

@include helpers.ds_media-query(medium) {
    .ds_warning-text {
        padding-right: 4rem;
    }

    .ds_warning-text__icon {
        top: 1.3125rem;
    }
}