/* #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; /* ensure it can shrink */
    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 */

/* #region coordinate block */
.coordinate-block {
    display: flex;
    align-items: center;
    gap: var(--wa-spacing-x-small, 0.25rem);
    padding: var(--wa-spacing-x-small, 0.25rem) var(--wa-spacing-small, 0.5rem);
    border-radius: var(--wa-border-radius-medium, 0.375rem);
    background: var(--wa-color-neutral-fill-quiet, rgba(128, 128, 128, 0.06));
    border: 1px solid var(--wa-color-neutral-border-quiet, rgba(128, 128, 128, 0.15));
    max-width: 100%;
    overflow: hidden;
}

.coordinate-text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
    flex: 1;
}

.coordinate-ga {
    color: var(--wa-color-brand-text, var(--wa-color-brand));
    font-family: var(--wa-font-mono, monospace);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coordinate-version {
    color: var(--wa-color-text-quiet, var(--wa-color-neutral-text));
    font-family: var(--wa-font-mono, monospace);
    opacity: 0.75;
}

.coordinate-copy {
    flex-shrink: 0;
    --wa-input-height-small: 1.5rem;
    font-size: var(--wa-font-size-xs, 0.75rem);
}
/* #endregion */

/* step icons for ordered instructions */
.step-icon {
    --primary-color: var(--wa-color-neutral-20);
    --secondary-color: var(--wa-color-neutral-80);
    --secondary-opacity: 1;
    font-size: 2em;

    .wa-dark & {
        --primary-color: var(--wa-color-neutral-90);
        --secondary-color: var(--wa-color-neutral-30);
    }
}

/* 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, but have their full presentation otherwise  */
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 (such as in plain buttons) */
wa-icon.icon-embiggen {
    font-size: round(1.125em, 1px);
}

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