un-btn[data-theme=haerer-geruestbau][data-html=triplebar] .bar {
    outline-color: #000;
    outline-offset: 0px;
    outline-width: 1px;
    outline-style: solid;
    box-shadow: 0 0 2px 3px var(--primary);
    background-color: var(--background);
    border-radius: 8px;
    height: 5px;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.13,.24,.35,1.64)
}

un-btn[data-theme=swipe] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

un-btn[data-theme=swipe] button {
    display: block;
    width: fit-content;
    height: fit-content;
    position: relative;
    transition: all .35s;
    padding: 5px 10px;
    border: 1px solid var(--primary);
    font-size: medium;
    font-family: sans-serif;
    text-decoration: none;
    letter-spacing: 2px;
    text-align: center;
    color: var(--primary)
}

un-btn[data-theme=swipe] button span {
    position: relative;
    z-index: 2
}

un-btn[data-theme=swipe] button:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: color-mix(in oklab,var(--primary),#fff 80%);
    transition: all .35s
}

un-btn[data-theme=swipe] button:hover {
    color: color-mix(in oklab,var(--primary),#000 30%)
}

un-btn[data-theme=swipe] button:hover:after {
    width: 100%
}

un-btn[data-theme=swipe] button:active:after {
    background-color: color-mix(in oklab,var(--primary),#fff 900%)
}

un-btn[data-html=triplebar] button {
    width: 30px;
    z-index: 3;
    position: relative
}

un-btn[data-html=triplebar] .bar {
    outline-color: #000;
    outline-offset: 0px;
    outline-width: 1px;
    outline-style: solid;
    background-color: var(--primary,#b0c4de);
    border-radius: 25px;
    box-shadow: 0 3px 13px rgba(0,0,0,.3);
    height: 4px;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.13,.24,.35,1.64)
}

un-btn[data-html=triplebar][data-state=on] .bar.one {
    transform: translate(0,9px) rotate(45deg)
}

un-btn[data-html=triplebar][data-state=on] .bar.two {
    background-color: transparent;
    outline-color: transparent;
    box-shadow: none;
    transform: translateX(-55px)
}

un-btn[data-html=triplebar][data-state=on] .bar.three {
    transform: translate(0,-14px) rotate(-45deg)
}

un-btn[data-html=triplebar] :is(.bar.one,.bar.two) {
    margin-bottom: 6px
}

un-btn[data-theme=triplebar-suedstadtsause][data-state=off] button {
    animation-name: wiggle;
    animation-duration: 1.3s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-delay: 0s
}

un-btn[data-theme=triplebar-vaadin] .bar {
    background-color: var(--analogous-1);
    outline-color: #000;
    outline-width: 1px;
    outline-offset: 0px
}

un-btn[data-html=css][data-theme=radioactive] button::after {
    content: '\26A0';
    font-size: 60px;
    color: var(--primary)
}

un-btn[data-html=css] button:hover::after {
    -webkit-text-stroke-color: color-mix(in srgb,var(--primary) 50%,black);
    -webkit-text-stroke-width: 1px
}

un-btn[data-html=css] button:active::after {
    -webkit-text-stroke-color: color-mix(in srgb,var(--primary) 50%,white);
    -webkit-text-stroke-width: 1px
}

un-btn[data-theme^=vaadin] button {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 5px;
    border: none
}

un-btn[data-theme=vaadin-1] button {
    color: #fff;
    font-size: medium;
    font-weight: 700;
    background-color: var(--primary);
    transition-property: all;
    transition-timing-function: ease-in-out;
    transition-duration: .2s
}

un-btn[data-theme=vaadin-1] button:hover {
    background-color: color-mix(in srgb,var(--primary) 80%,#000)
}

un-btn[data-theme=vaadin-1] button:active {
    background-color: color-mix(in srgb,var(--primary) 80%,#fff)
}

un-btn[data-theme=vaadin-1] button:focus-visible {
    outline: 2px solid color-mix(in srgb,var(--primary) 70%,white);
    outline-offset: 1px
}

un-btn[data-theme=vaadin-2] button {
    font-size: medium;
    background-color: color-mix(in srgb,var(--primary) 10%,transparent);
    color: color-mix(in srgb,var(--primary) 96%,#000)
}

un-btn[data-theme=vaadin-2] button:hover {
    background-color: color-mix(in srgb,var(--primary) 30%,transparent)
}

un-btn[data-theme=vaadin-2] button:active {
    background-color: color-mix(in srgb,var(--primary) 10%,#fff)
}

un-btn[data-theme=vaadin-2] button:focus-visible {
    outline: 2px solid color-mix(in srgb,var(--primary) 70%,white);
    outline-offset: 1px
}

un-btn[data-theme=vaadin-3] button {
    font-size: small;
    background-color: color-mix(in srgb,var(--primary) 5%,transparent);
    color: color-mix(in srgb,var(--primary) 90%,#fff)
}

un-btn[data-theme=vaadin-3] button:hover {
    background-color: color-mix(in srgb,var(--primary) 15%,transparent)
}

un-btn[data-theme=vaadin-3] button:active {
    background-color: color-mix(in srgb,var(--primary) 0%,transparent)
}

un-btn[data-theme=vaadin-3] button:focus-visible {
    outline: 2px solid color-mix(in srgb,var(--primary) 70%,white);
    outline-offset: 1px
}

un-btn {
    display: contents
}

un-btn button {
    width: fit-content;
    text-align: center;
    outline: 0;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    color: inherit;
    font: inherit
}

un-btn button>svg {
    width: 25px
}

un-btn button:focus-visible {
    outline-offset: 1px;
    outline-width: 2px;
    outline-style: solid;
    outline-color: color-mix(in srgb,var(--primary) 70%,#fff)
}