:host {
    -webkit-tap-highlight-color: inherit;
    background: #293fe6;
    display: inline-block;
    color: #fff;
    border-radius: 5px;
    vertical-align: baseline;
    font-size: inherit;
    padding: 0.6em 1.2em;
    font-weight: bold;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    /* Safari fallback only */
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    text-align: center;
    box-shadow:
        inset 1px 1px 2px rgb(255 255 255 / 50%),
        inset -1px -1px 2px rgb(0 0 0 / 25%),
        inset 0 0 0 1px rgb(0 0 0 / 25%);
    line-height: 1.33;
}

:host slot {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}

:host(:not([disabled]):hover) {
    box-shadow:
        inset 1px 1px 2px rgb(255 255 255 / 50%),
        inset -1px -1px 2px rgb(0 0 0 / 25%),
        inset 0 0 0 1px rgb(0 0 0 / 25%),
        /* lit */
        inset 0 0 1em 1em hsla(0 0% 75% / 16%);
}

:host(:not([disabled]):active) {
    box-shadow:
        inset 0 0 0 1px hsla(0 0% 50% / 25%),
        inset 0 1px 3px rgba(0 0 0 / 75%),
        inset -1px -1px 1px rgb(255 255 255 / 25%);
}

:host(:hover[disabled]) {
    cursor: default;
}

:host([disabled]) {
    pointer-events: none;
    box-shadow:
        inset -1px -1px 2px rgb(255 255 255 / 65%),
        inset 1px 1px 2px rgb(0 0 0 / 25%),
        inset 0 0 0 1px rgb(0 0 0 / 25%);
    filter: grayscale(1) contrast(0.25) invert(1) brightness(1.33);
}

:host([hidden]) {
    display: none !important;
}