@import "dxHelpers/reset";
@import "dxHelpers/text";

:host {
    --dx-c-input-background-active: white;
    --dx-c-input-background: white;
    --dx-c-input-border-active: 2px solid var(--dx-g-blue-vibrant-50);
    --dx-c-input-border-radius: var(--dx-g-spacing-xs);
    --dx-c-input-border: 1px solid var(--dx-g-gray-90);
    --dx-c-input-boxshadow-active: none;
    --dx-c-input-height: var(--dx-g-spacing-3xl);
    --dx-c-input-icon-color: var(--dx-g-gray-50);
    --dx-c-input-padding: none;
    --dx-c-input-width: 376px;

    max-width: 100%;
}

.input-group.size-small {
    --dx-c-input-height: var(--dx-g-spacing-xl);
}

.input-group {
    --error-color: var(--dx-g-red-vibrant-50);

    height: var(--dx-c-input-height);
    width: var(--dx-c-input-width);
    max-width: inherit;
    display: flex;
    flex-direction: row;
}

.input-group > *:not(:last-child) {
    margin-right: var(--dx-g-spacing-sm);
}

.input-container {
    display: flex;
    align-items: center;
    position: relative;
    height: inherit;
    font-size: var(--dx-g-text-sm);
    font-family: var(--dx-g-font-sans);
    color: var(--dx-g-gray-50);
    border: var(--dx-c-input-border);
    border-radius: var(--dx-c-input-border-radius);
    transition: var(--dx-g-transition-hue-1x),
        var(--dx-g-transition-box-shadow-1x);
    background: var(--dx-c-input-background);
    padding: var(--dx-c-input-padding);
    flex-grow: 1;
}

.input-container.has-floating-item {
    padding-right: var(--dx-g-spacing-sm);
}

.input-container.state-focused {
    background: var(--dx-c-input-background-active);
    box-shadow: var(--dx-c-input-boxshadow-active);
}

.input-container.state-focused:not(.has-error) {
    border: var(--dx-c-input-border-active);
}

.input-container > dx-icon {
    color: var(--dx-c-input-icon-color);
    margin-left: var(--dx-g-spacing-sm);
}

.input-container > dx-button {
    margin: 0 var(--dx-g-spacing-sm);
}

input {
    height: 100%;
    width: 100%;
    min-width: 0;
    border: none;
    padding: 0 var(--dx-g-spacing-md);
    border-radius: var(--dx-g-spacing-xs);
    font-size: inherit;
    font-family: inherit;
    color: var(--dx-g-gray-10);
    caret-color: var(--dx-g-blue-vibrant-50);
    text-overflow: ellipsis;
    transition: var(--dx-g-transition-hue-1x);
    outline: none;
}

/* Show the default system disabled background if disabled; otherwise show container background */
input:not([disabled]) {
    background: none;
}

label {
    color: var(--sds-g-gray-11);
    display: inline-block;
    font-size: var(--dx-g-text-xs);
    hyphens: auto;
    margin-bottom: var(--dx-g-spacing-2xs);
    padding-right: var(--dx-g-spacing-sm);
    padding-top: var(--dx-g-spacing-xs);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.input-group.size-small input {
    padding: 0 var(--dx-g-spacing-sm);
}

input::placeholder {
    color: var(--dx-g-gray-30);
}

.input-container > img {
    position: absolute;
    z-index: 2;
    height: var(--dx-g-spacing-sm);
    top: calc(50% - var(--dx-g-spacing-xs));
    right: var(--dx-g-spacing-sm);
    pointer-events: none;
}

.shortcut {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-xs);
    color: var(--dx-g-gray-50);
    line-height: var(--dx-g-text-base);
    text-transform: uppercase;
}

.description {
    margin-top: var(--dx-g-spacing-xs);
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-xs);
    line-height: 18px;
    color: var(--dx-g-gray-50);
}

.description.hide {
    display: none;
}

.description a {
    color: var(--dx-g-blue-vibrant-50);
}

.shortcut > img {
    margin-right: var(--dx-g-spacing-2xs);
}

.has-error {
    background-clip: padding-box;
    border: 2px solid var(--error-color);
}

.has-error.state-focused {
    box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
}

.error-message-box {
    margin-top: var(--dx-g-spacing-xs);
    display: block;
}

.clear-button > dx-icon {
    --dx-c-icon-color: var(--sds-g-gray-9);
}

.clear-button > dx-icon::part(svg) {
    transition: var(--dx-g-transition-hue-1x);
}

.clear-button:hover > dx-icon {
    --dx-c-icon-color: var(--dx-g-blue-vibrant-30);
}