@postenbring/hedwig-css/dist/input-group.css

Styles for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

.hds-input-group{--hds-input-group-background-color:var(--hds-ui-colors-light-grey-fill)}.hds-input-group.hds-input-group--white{--hds-input-group-background-color:var(--hds-ui-colors-white)}.hds-input-group{gap:var(--hds-spacing-4);flex-flow:column;display:flex}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper{background-color:var(--hds-ui-colors-warning-yellow-light-fill)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper:not(:focus-within){border-bottom:var(--hds-stroke-thick)solid var(--hds-ui-colors-warning-yellow)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper{margin-bottom:calc(-1*var(--hds-stroke-default))}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only,textarea.hds-input-group__input:read-only){background-color:var(--hds-ui-colors-warning-yellow-light-fill)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only,textarea.hds-input-group__input:read-only):not(:focus-within){border-bottom:var(--hds-stroke-thick)solid var(--hds-ui-colors-warning-yellow)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only,textarea.hds-input-group__input:read-only){margin-bottom:calc(-1*var(--hds-stroke-default))}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper[data-readonly=true]{background-color:var(--hds-ui-colors-warning-yellow-light-fill)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper[data-readonly=true]:not(:focus-within){border-bottom:var(--hds-stroke-thick)solid var(--hds-ui-colors-warning-yellow)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper[data-readonly=true]{margin-bottom:calc(-1*var(--hds-stroke-default))}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only,textarea.hds-input-group__input:read-only):focus-within{background-color:var(--hds-ui-colors-warning-yellow-light-fill)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only,textarea.hds-input-group__input:read-only):focus-within:not(:focus-within){border-bottom:var(--hds-stroke-thick)solid var(--hds-ui-colors-warning-yellow)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only,textarea.hds-input-group__input:read-only):focus-within{margin-bottom:calc(-1*var(--hds-stroke-default))}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper:has(.hds-input-group__input:disabled){background-color:var(--hds-ui-colors-warning-yellow-light-fill)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper:has(.hds-input-group__input:disabled):not(:focus-within){border-bottom:var(--hds-stroke-thick)solid var(--hds-ui-colors-warning-yellow)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper:has(.hds-input-group__input:disabled){margin-bottom:calc(-1*var(--hds-stroke-default))}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper[data-disabled=true]{background-color:var(--hds-ui-colors-warning-yellow-light-fill)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper[data-disabled=true]:not(:focus-within){border-bottom:var(--hds-stroke-thick)solid var(--hds-ui-colors-warning-yellow)}.hds-input-group.hds-input-group--error .hds-input-group__input-wrapper[data-disabled=true]{margin-bottom:calc(-1*var(--hds-stroke-default))}.hds-input-group:focus-within .hds-input-group__label{color:var(--hds-colors-dark)}.hds-input-group .hds-input-group__label{transition:color var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);font:var(--hds-typography-caption)}.hds-input-group:has(input.hds-input-group__input:read-only,textarea.hds-input-group__input:read-only,.hds-input-group__input:disabled):not(:focus-within) .hds-input-group__label{color:var(--hds-ui-colors-dark-grey)}.hds-input-group .hds-input-group__input-wrapper{background-color:var(--hds-input-group-background-color);border:0;border-bottom:var(--hds-stroke-default)solid var(--hds-ui-colors-dark-grey);border-top-left-radius:var(--hds-border-radius);border-top-right-radius:var(--hds-border-radius);width:100%;transition-duration:var(--hds-micro-animation-duration-quick);transition-timing-function:var(--hds-micro-animation-easing-normal);box-sizing:border-box;flex-flow:row;transition-property:border-color;display:flex}.hds-input-group .hds-input-group__input-wrapper:focus-within{border-bottom:var(--hds-stroke-thick)solid var(--hds-colors-dark);margin-bottom:calc(-1*var(--hds-stroke-default))}.hds-input-group .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only,textarea.hds-input-group__input:read-only):focus-within{border-bottom:var(--hds-stroke-thick)solid var(--hds-colors-dark);margin-bottom:calc(-1*var(--hds-stroke-default))}.hds-input-group .hds-input-group__input-wrapper[data-readonly=true]:focus-within{border-bottom:var(--hds-stroke-thick)solid var(--hds-colors-dark);margin-bottom:calc(-1*var(--hds-stroke-default))}.hds-input-group .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only,textarea.hds-input-group__input:read-only) .hds-input-group__input{color:var(--hds-ui-colors-dark-grey)}.hds-input-group .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only,textarea.hds-input-group__input:read-only){background-color:var(--hds-ui-colors-grey);border-bottom:var(--hds-stroke-default)solid var(--hds-ui-colors-grey)}.hds-input-group .hds-input-group__input-wrapper[data-readonly=true] .hds-input-group__input{color:var(--hds-ui-colors-dark-grey)}.hds-input-group .hds-input-group__input-wrapper[data-readonly=true]{background-color:var(--hds-ui-colors-grey);border-bottom:var(--hds-stroke-default)solid var(--hds-ui-colors-grey)}.hds-input-group .hds-input-group__input-wrapper:has(.hds-input-group__input:disabled) .hds-input-group__input{color:var(--hds-ui-colors-dark-grey)}.hds-input-group .hds-input-group__input-wrapper:has(.hds-input-group__input:disabled){background-color:var(--hds-ui-colors-grey);border-bottom:var(--hds-stroke-default)solid var(--hds-ui-colors-grey)}.hds-input-group .hds-input-group__input-wrapper[data-disabled=true] .hds-input-group__input{color:var(--hds-ui-colors-dark-grey)}.hds-input-group .hds-input-group__input-wrapper[data-disabled=true]{background-color:var(--hds-ui-colors-grey);border-bottom:var(--hds-stroke-default)solid var(--hds-ui-colors-grey)}.hds-input-group .hds-input-group__input{color:var(--hds-ui-colors-black);width:100%;padding:var(--hds-spacing-16);font:var(--hds-typography-body-small);background:0 0;border:0;line-height:normal}.hds-input-group .hds-input-group__input::-ms-input-placeholder{color:var(--hds-ui-colors-dark-grey);opacity:1}.hds-input-group .hds-input-group__input::placeholder{color:var(--hds-ui-colors-dark-grey);opacity:1}.hds-input-group .hds-input-group__input:focus{outline:0}.hds-input-group .hds-input-group__input:focus::-ms-input-placeholder{color:var(--hds-ui-colors-grey)}.hds-input-group .hds-input-group__input:focus::placeholder{color:var(--hds-ui-colors-grey)}.hds-input-group .hds-input-group__input:read-only:focus::-ms-input-placeholder{color:var(--hds-ui-colors-dark-grey)}.hds-input-group .hds-input-group__input:read-only:focus::placeholder{color:var(--hds-ui-colors-dark-grey)}