:host {
    display: block;

    --blob-size: 30px;
    --gutter-size: 30px;
    --icon-gap: 12px;
    --icon-size: 24px;
    --vertical-spacing: 20px;

    --default-color: var(--color-text);
    --disabled-color: var(--color-shade-50);

    --active-color: var(--color-secondary);
    --active-background-color: transparent;

    --highlight-color: var(--color-text);
    --highlight-background-color: transparent;
    --highlight-decoration: underline;
}

:host([level='2']) :matches(a, button) {
    padding-left: calc(var(--gutter-size) * 1.5);
}

:host([level='3']) :matches(a, button) {
    padding-left: calc(var(--gutter-size) * 2);
}

:host([level='4']) :matches(a, button) {
    padding-left: calc(var(--gutter-size) * 2.5);
}

:host([level='5']) :matches(a, button) {
    padding-left: calc(var(--gutter-size) * 3);
}

:host([high-contrast]) :matches(.disabled) {
    -webkit-text-decoration: line-through;
    text-decoration: line-through;
}

a,
button {
    padding: calc(var(--vertical-spacing) / 2);
    padding-left: var(--gutter-size);
    padding-right: var(--gutter-size);
    color: var(--default-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    -webkit-text-decoration: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    outline-offset: -1px;
    gap: var(--icon-gap);
    transition:
        color 500ms ease, background-color 500ms ease;
}

a::before, button::before {
        content: '';
        display: block;
        position: absolute;
        background-color: currentColor;
        width: var(--blob-size);
        height: var(--blob-size);
        border-radius: 50%;
        right: 100%;
        top: 0;
        bottom: 0;
        margin: auto;
        transition:
            transform 500ms ease, opacity 500ms ease;
        opacity: 0;
    }

a:active, button:active {
        color: var(--active-color);
    }

a.active,
    button.active,
    a.link-active,
    button.link-active {
        color: var(--active-color);
        background-color: var(--active-background-color);
    }

a.active:hover,
        button.active:hover,
        a.link-active:hover,
        button.link-active:hover,
        a.active:focus-visible,
        button.active:focus-visible,
        a.link-active:focus-visible,
        button.link-active:focus-visible,
        a.active,
        button.active,
        a.link-active,
        button.link-active {
            color: var(--active-color);
        }

a.active:hover::before, button.active:hover::before, a.link-active:hover::before, button.link-active:hover::before, a.active:focus-visible::before, button.active:focus-visible::before, a.link-active:focus-visible::before, button.link-active:focus-visible::before, a.active::before, button.active::before, a.link-active::before, button.link-active::before {
                transform: translateX(50%);
                opacity: 1;
            }

a:hover,
    button:hover,
    a:focus-visible,
    button:focus-visible {
        color: var(--highlight-color);
        background-color: var(--highlight-background-color);
        -webkit-text-decoration: var(--highlight-decoration);
                text-decoration: var(--highlight-decoration);
    }

a:hover::before, button:hover::before, a:focus-visible::before, button:focus-visible::before {
            transform: translateX(25%);
            opacity: 0.5;
        }

a.disabled, button.disabled {
        color: var(--disabled-color);
        cursor: not-allowed;
    }

a.disabled:hover,
        button.disabled:hover,
        a.disabled:focus-visible,
        button.disabled:focus-visible {
            -webkit-text-decoration: none;
            text-decoration: none;
        }

a.disabled::before, button.disabled::before {
            display: none;
        }

.inner {
    flex: 1 1 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

es-icon {
    height: var(--icon-size);
    width: var(--icon-size);
}

:host([mode='collapsed']) {
    --blob-size: 0;
}

:host([mode='collapsed']) a,
    :host([mode='collapsed']) button {
        transition: color 500ms ease;
        padding-left: 0;
        padding-right: 0;
    }

:host([mode='collapsed']) a:hover,
        :host([mode='collapsed']) button:hover,
        :host([mode='collapsed']) a:focus-visible,
        :host([mode='collapsed']) button:focus-visible {
            color: var(--active-color);
        }


button {
    -webkit-appearance: initial;
       -moz-appearance: initial;
            appearance: initial;
    border: medium none currentcolor;
    border: initial;
    margin: 0;
    margin: initial;
    width: 100%;
    text-align: inherit;
    font: inherit;
    cursor: pointer;
    background-color: transparent;
    background-color: initial;
}