/* Metro Tabs style presets for the core Tabs block (WordPress 7.1+). */
.wp-block-tabs:is(
    .is-style-metrotabs-underline,
    .is-style-metrotabs-pills,
    .is-style-metrotabs-boxed,
    .is-style-metrotabs-segmented
) {
    --metrotabs-line: color-mix(in srgb, currentColor 12%, transparent);
    --metrotabs-radius: 6px;

    .wp-block-tab-list button {
        border: 0;
        background: none;
        color: color-mix(in srgb, currentColor 65%, transparent);
        font: inherit;
        font-weight: 500;
        padding: 0.55em 1em;
        cursor: pointer;

        &:hover,
        &[aria-selected="true"] {
            color: inherit;
        }
    }
}

.wp-block-tabs.is-style-metrotabs-underline .wp-block-tab-list {
    border-block-end: 1px solid var(--metrotabs-line);

    button {
        border-block-end: 2px solid transparent;
        margin-block-end: -1px;

        &[aria-selected="true"] {
            border-block-end-color: currentColor;
        }
    }
}

.wp-block-tabs.is-style-metrotabs-pills .wp-block-tab-list button {
    border-radius: 999px;

    &[aria-selected="true"] {
        background: color-mix(in srgb, currentColor 10%, transparent);
    }
}

.wp-block-tabs.is-style-metrotabs-boxed {
    .wp-block-tab-list {
        border-block-end: 1px solid var(--metrotabs-line);

        button {
            border: 1px solid transparent;
            border-radius: var(--metrotabs-radius) var(--metrotabs-radius) 0 0;
            margin-block-end: -1px;

            &[aria-selected="true"] {
                border-color: var(--metrotabs-line);
                border-block-end-color: Canvas;
                background: Canvas;
            }
        }
    }

    .wp-block-tab-panels {
        padding: 1.5em;
        border: 1px solid var(--metrotabs-line);
        border-block-start: 0;
    }
}

.wp-block-tabs.is-style-metrotabs-segmented .wp-block-tab-list {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: calc(var(--metrotabs-radius) + 3px);
    background: color-mix(in srgb, currentColor 8%, transparent);

    button {
        border-radius: var(--metrotabs-radius);

        &[aria-selected="true"] {
            background: Canvas;
            box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
        }
    }
}