a.custom-element-edit-link {
    color: inherit;
    font-size: .7em;
    vertical-align: super;
}

async-button{
    transition: padding 1s;
}
async-button:not(.link, [link]) {
    appearance: initial;
    border-radius: 5px;
    background-color: #e9e9ed;
    border: 1px solid #8f8f9d;
    color: black;
    padding: .2em .4em;
    cursor: default;
}

async-button:not(.link, [link]):hover {
    border: 1px solid #676774;
    background-color: #d0d0d7;
}

async-button:not(.link, [link]):active {
    border: 1px solid #484851;
    background-color: #b1b1b9;
}

async-button:not(.link, [link]) {
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: .2em 1.2em .2em 0.2em;
}

async-button.link, async-button[link]{
    cursor: pointer;
}

async-button.working {
    padding: .2em .4em .2em .6em;
    pointer-events: none;
}

async-button.working > svg {
    margin-right: .5em;
    visibility: visible;
    opacity: 1;
}

async-button > svg {
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    /* box-sizing: border-box; */
    border-radius: 50%;
    height: 1em;
    width: 1em;
    animation: asyncButtonWorking 2s;
    stroke-dasharray: 68%;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transition: margin 1s, opacity 1s;
}

@keyframes asyncButtonWorking {
    0%{
        stroke-dasharray: 68%;
        transform: rotate(0deg);
    }
      
    50%{
        stroke-dasharray: 160%;
    }
    99%{
        stroke-dasharray: 68%;
    }
    100% {
        transform: rotate(360deg);
        stroke-dasharray: 68%;
        animation-timing-function: step-end;
    }
}

async-button.error {
    border: 1px solid red;
}

async-button.done {
    padding: .2em .7em .2em .7em;
}

async-button.final{
    pointer-events: none;
    opacity: .8;
}

split-button {
    display: flex;
    border: 1px solid currentColor;
    background: var(--project-color-button-init);
    border-radius: 4px;
    font-size: 1.1rem;
    color: var(--project-color-button-text);
    overflow: hidden;
    grid-template-rows: auto;
    grid-template-columns: auto 3rem;
}

split-button option {
    display: none;
}

split-button :is(button, async-button:not(.link, [link]), async-button.link, async-button[link]),
split-button :is(button, async-button:not(.link, [link]), async-button.link, async-button[link]):hover {
    border: none;
    color: inherit;
    background: none;
    margin: 0;
    padding: .4rem .6rem;
    text-align: center;
    border-radius: 0;
    transition: none;
    height: 100%;
    flex-grow: 1;
    align-items:center;
    height: 3rem;
    box-sizing: border-box;
}

split-button :is(button, async-button:not(.link, [link]), async-button.link, async-button[link]):hover {
    background: var(--project-color-button-hover);
    color: var(--project-color-button-hover-text);
}

split-button button.split-button--additional-options,
split-button button.split-button--additional-options:hover {
    border-left: .5px solid currentColor;
    max-width: 3rem;
    width: 3rem;
}

:is(button, async-button, input[type="button"])[aria-pressed='true'] {
    background: var(--project-color-button-text);
    color: var(--project-color-button-init);
}

button-toggle {
}

button-toggle[aria-pressed="true"] {

}

button-toggle[aria-pressed="false"] {

}