:host {
    user-select: none;
    -webkit-user-select: none;
    /* Safari fallback only */
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    vertical-align: baseline;
}

:host slot {
    display: block;
}

:host svg {
    display: none;
}

::slotted([slot]) {
    /* slot1 every slotted element - YES */
    color: inherit;
    background-color: transparent;
    border: none;
}

:host([type=text]),
:host([type=password]),
:host([type=email]),
:host([type=number]),
:host([type=search]),
:host([type=tel]),
:host([type=url]) {
    display: inline-block;
    width: 12em;
    min-width: 1em;
    font-size: inherit;
    padding: 0.6em 0.66em;
    /* line-height: 1.33; */
    border-radius: 4px;
    box-sizing: border-box !important;
    box-shadow: -1px -1px 2px -1px rgba(0, 0, 0, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.33), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    background-color: inherit;
    color: inherit;
}

:host([disabled]) {
    box-shadow: none;
    background-color: hsla(0deg, 0%, 50%, 0.33);
    filter: grayscale(1);
}

:host([type=checkbox]) {
    min-height: unset;
    width: 1em;
    height: 1em;
    font-size: 1em;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    color: #293fe6;
    border: 2px solid currentColor;
    border-radius: 2px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    display: inline-block;
    line-height: inherit;
}


:host([type=checkbox][checked]) svg {
    user-select: none;
    pointer-events: none;
    width: 100%;
    display: block;
    color: inherit;
}

:host([type=radio]) {
    min-height: unset;
    width: 1em;
    height: 1em;
    font-size: 1em;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    color: #293fe6;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-radius: 100%;
    display: inline-block;
    line-height: inherit;
}

:host([type=radio])::after {
    content: "";
    user-select: none;
    pointer-events: none;
    display: block;
    position: relative;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    margin: 2px;
    border-radius: inherit;
    box-shadow: none;
    background-color: transparent;
}

:host([type=radio][checked])::after {
    box-shadow:
        inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.5),
        inset -0.5px -0.5px 0px rgba(0, 0, 0, 0.25),
        inset 0 0 0px 0.5px rgba(0, 0, 0, 0.25);
    background-color: currentColor;
}

:host(:not([disabled]):active[type=radio])::after {
    box-shadow:
        inset 0 0 0px 0.5px hsla(0deg, 0%, 50%, 0.25),
        inset 0.15px 0.5px 0px rgba(0, 0, 0, 0.8),
        inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.25);
    /* add press overlay */
    background-color: currentColor;
}

:host([type=radio][disabled]) {
    background-color: hsla(0deg, 0%, 50%, 0.33);
}

:host([type=checkbox][disabled]) {
    background-color: hsla(0deg, 0%, 50%, 0.33);
}

:host([type=reset]),
:host([type=submit]) {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: #293fe6;
    display: inline-table;
    color: #ffffff;
    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;
    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([type=reset]) span[button-text],
:host([type=submit]) span[button-text] {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    vertical-align: middle;
}

:host([type=reset]:not([disabled]):hover),
:host([type=submit]: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([type=reset]:hover[disabled]),
:host([type=submit]:hover[disabled]) {
    cursor: default;
}

:host([type=reset][disabled]),
:host([type=submit][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([type=reset][hidden]),
:host([type=submit][hidden]) {
    display: none !important;
}

:host([type=reset]:not([disabled]):active),
:host([type=submit]: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%);
}