/**
 * External Links CSS
 */

/* External link icons - using USWDS style */
.acc-external-link-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    /* Based on USWDS design system external link icon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 4px;
    margin-right: 4px;
    vertical-align: baseline;
    position: relative;
    top: 0.1em;
    /* Use currentColor to inherit color from context */
    color: inherit;
}

/* Special class for using Bricks light background color variable - with higher specificity */
.acc-external-links-light-color .acc-external-link-icon {
    color: var(--bricks-bg-light, #f5f5f5) !important;
    /* Use more direct SVG coloring by applying color to the SVG */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f5f5f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
}

/* Apply light color even when the class is applied to the icon itself */
.acc-external-link-icon.acc-external-links-light-color {
    color: var(--bricks-bg-light, #f5f5f5) !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f5f5f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
}

.acc_dark_blue_underline_link .acc-external-link-icon {
    color: #fff !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
}

.acc_dark_blue_underline_link .content-wrapper > div:last-child::after {
    color: #fff !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
}

/* Position adjustments for icons placed inside links */
a.acc-external-link .acc-external-link-icon:first-child {
    margin-left: 0;
    margin-right: 2px;
}

a.acc-external-link .acc-external-link-icon:last-child {
    margin-left: 2px;
    margin-right: 0;
}

/* Very specific button targeting */
.brxe-button.acc-external-link .acc-external-link-icon,
.bricks-button.acc-external-link .acc-external-link-icon,
a.acc-external-link.brxe-button .acc-external-link-icon,
a.acc-external-link.bricks-button .acc-external-link-icon {
    width: 0.8em !important;
    height: 0.8em !important;
    position: relative !important;
    top: 0 !important;
    margin-left: -6px !important;
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: baseline !important;
}

/* Special handling for links in .acc_box_external_link containers */
.acc_box_external_link a.acc-external-link {
    position: relative;
}

/* Remove the original icon that's a direct child of the link */
.acc_box_external_link a.acc-external-link > .acc-external-link-icon {
    display: none;
}

/* Add the icon after the content in the last div */
.acc_box_external_link a.acc-external-link .content-wrapper > div:last-child {
    position: relative;
    display: inline-block;
    width: 100%;
}

.acc_box_external_link a.acc-external-link .content-wrapper > div:last-child::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 4px;
    vertical-align: baseline;
    position: relative;
    top: 3px;
}

/* Fix for links with no text */
a.acc-external-link:empty .acc-external-link-icon {
    margin: 0;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .acc-external-link-icon {
        width: 12px;
        height: 12px;
    }
}

/* High contrast mode support */
@media (forced-colors: active) {
    .acc-external-link-icon {
        forced-color-adjust: auto;
    }
}

/* Color scheme adaptations */
@media (prefers-color-scheme: dark) {
    .acc-external-link-icon {
        opacity: 0.9;
    }
}

/* Print styles */
@media print {
    .acc-external-link-icon {
        display: none;
    }
}