:host{
    display: block;
    margin: var(--jb-input-margin, 0 0);
    width: var(--jb-input-width, 100%);
}

:host(:focus),
:host(:focus-visible) {
    outline: none;
}

.jb-input-web-component {
    width: 100%;
    &:focus-visible {
        outline: none;
    }
    label {
        width: 100%;
        margin: var(--label-margin);
        display: block;
        font-size: var(--label-font-size);
        color: var(--label-color);
        font-weight: var(--jb-input-label-font-weight, 300);
        &:empty{
            display: none;
        }
    }
    .input-box {
        width: 100%;
        box-sizing: border-box;
        height: var(--height);
        border: solid var(--border-width) var(--border-color);
        background-color: var(--input-box-bg-color);
        margin: var(--jb-input-box-margin, 0px);
        border-bottom: solid var(--border-bottom-width) var(--border-color);
        border-radius: var(--border-radius);
        transition: ease 0.3s all;
        overflow: var(--jb-input-box-overflow, hidden);
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: minmax(0, 1fr);
        box-shadow: var(--jb-input-box-shadow, none);
        &:focus-within {
            border-width: var(--jb-input-border-width-focus, var(--jb-input-border-width, 1px));
            border-bottom-width: var(--jb-input-border-bottom-width-focus, var(--jb-input-border-bottom-width, 3px));
            box-shadow: var(--jb-input-box-shadow-focus, none);
        }
        input {
            border: none;
            width: 100%;
            box-sizing: border-box;
            height: 100%;
            background-color: transparent;
            padding: var(--input-padding);
            display: block;
            font-family: inherit;
            font-size: var(--value-font-size);
            color: var(--value-color);
            margin: 0;
            border-radius: 0;
            text-align: var(--jb-input-input-text-align, initial);
            direction: var(--jb-input-input-direction, inherit);
            font-weight: var(--jb-input-input-font-weight, initial);
            cursor: inherit;
            &:focus {
                outline: none;
            }
            &::placeholder {
                color: var(--placeholder-color);
                font-size: var(--placeholder-font-size);
            }
            /*remove number input arrow keys of browser*/
            /* Chrome, Safari, Edge, Opera */
            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            /* Firefox */
            &[type="number"] {
                -moz-appearance: textfield;
            }
        }
        .jb-input-start-section-wrapper{
            display: flex;
            height: 100%;
            width: auto;
            align-items: center;
            justify-content: center;
        }
        ::slotted([slot="start-section"]), ::slotted([slot="end-section"]){
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            max-height: 100%;
            overflow-y: hidden;
            background-color: transparent;
            padding: var(--inline-slots-padding);
            width: auto;
            box-sizing: border-box;
        }
    }
    .message-box {
        font-size: var(--message-font-size);
        padding: 0.125rem var(--inline-space);
        color: var(--message-color);
        display: var(--jb-input-message-box-display, block);
        &:empty {
            padding: 0;
        }
    }
}