kiss-tabs {
    display: block;
}

kiss-tabs tab {
    display: none;
}

kiss-tabs tab[active="true"] {
    display: block;
}

.kiss-tabs-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.kiss-tabs-nav-link:hover {
    color: inherit;
}

.kiss-tabs-nav-link {
    display: block;
    position: relative;
    font-size: .8em;
    line-height: inherit;
    letter-spacing: .015em;
    text-decoration: none;
    color: inherit;
    padding: 8px 12px;
    opacity: .5;
}

[active="true"] > .kiss-tabs-nav-link {
    opacity: 1;
    color: var(--kiss-tabs-active-color, inherit);
    font-weight: bold;
}

[active="true"] > .kiss-tabs-nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    border-bottom: 1px currentColor solid;
}

.kiss-tabs-nav-link > * {
    pointer-events: none;
}
