/* #region feature cards */
wa-card {
    min-width: 0;
    overflow: hidden;
}

wa-card code {
    overflow-wrap: break-word;
    word-break: break-all;
}

.feature-card {
    transition:
        transform var(--wa-transition-normal, 150ms) var(--wa-transition-easing, ease),
        box-shadow var(--wa-transition-normal, 150ms) var(--wa-transition-easing, ease),
        border-color var(--wa-transition-normal, 150ms) var(--wa-transition-easing, ease);
    --border-color: var(--wa-color-neutral-border-quiet);
    border-top: 3px solid var(--wa-color-brand-normal, var(--wa-color-brand));
    min-width: 0;
    overflow: hidden;
}

.feature-card::part(base) {
    overflow: hidden;
    min-width: 0;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wa-shadow-m, 0 4px 16px rgba(0, 0, 0, 0.1));
    --border-color: var(--wa-color-brand-normal, var(--wa-color-brand));
}

.feature-card-title {
    color: var(--wa-color-text-normal);
    overflow-wrap: break-word;
    word-break: break-word;
}

.feature-card-body {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.feature-card-body code,
.feature-card-note code,
.feature-card-title code {
    overflow-wrap: break-word;
    word-break: break-all;
}

.feature-card-note {
    padding-block-start: var(--wa-spacing-x-small, 0.25rem);
    border-block-start: 1px solid var(--wa-color-neutral-border-quiet);
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.wa-dark .feature-card:hover {
    box-shadow: var(--wa-shadow-m, 0 4px 16px rgba(0, 0, 0, 0.3));
}
/* #endregion */

/* decorative underline emphasis */
.appearance-underlined.variant-drawn {
    --underline-color: currentColor;
    position: relative;
    text-decoration: none;
    padding-bottom: 0.4em;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0.4em;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,12 Q50,8 100,12' stroke='black' stroke-width='4' fill='none'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-size: 100% auto;
        mask-position: 0 100%;
        background-color: var(--underline-color);
    }
}

/* buttons with icon toggle on hover */
wa-button .icon-hover {
    display: none;
}
wa-button:hover .icon-default {
    display: none;
}
wa-button:hover .icon-hover {
    display: inline-flex;
}

/* buttons that are "shushed" (visually muted) by default */
wa-button.shush {
    &:not(:hover):not(active)::part(base) {
        color: var(--wa-color-text-quiet);
    }
}

/* reducing the visual weight of peripheral presentational content */
.de-emphasize {
    opacity: 0.6;
}

/* increasing visual size of icons in certain contexts */
wa-icon.icon-embiggen {
    font-size: round(1.125em, 1px);
}

/* decreasing visual size of icons in certain contexts */
wa-icon.icon-shrink {
    font-size: round(0.875em, 1px);
}