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

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

{"version":3,"sourceRoot":null,"mappings":"AAAA,yFAIE,sGAIQ,wEAMN,wIAQE,0KAIc,yHAZhB,8NAQE,gQAIc,+MAZhB,4JAQE,8LAIc,6IAZhB,2OAQE,6QAIc,4NAZhB,8KAQE,gNAIc,+JAZhB,4JAQE,8LAIc,6IAKlB,mFAIA,+KAOA,wNASA,+fAeE,iLAAA,uQAAA,qMAcE,oMAIiB,yPAJjB,kIAIiB,uLAJjB,oJAIiB,yMAJjB,kIAIiB,uLAKrB,oMASE,+GAAA,qGAKA,yDAGE,sGAAA,4FAKF,qHAAA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/form/input-group/input-group.css"],"sourcesContent":[".hds-input-group {\n  --hds-input-group-background-color: var(--hds-ui-colors-light-grey-fill);\n\n  /* Modifier: White */\n  &.hds-input-group--white {\n    --hds-input-group-background-color: var(--hds-ui-colors-white);\n  }\n\n  display: flex;\n  flex-flow: column nowrap;\n  gap: var(--hds-spacing-4);\n\n  /* State: Error */\n  &.hds-input-group--error {\n    .hds-input-group__input-wrapper,\n    .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only, textarea.hds-input-group__input:read-only),\n    .hds-input-group__input-wrapper[data-readonly=\"true\"] /* Fallback for :has */,\n    .hds-input-group__input-wrapper:has(input.hds-input-group__input:read-only, textarea.hds-input-group__input:read-only):focus-within,\n    .hds-input-group__input-wrapper:has(.hds-input-group__input:disabled),\n    .hds-input-group__input-wrapper[data-disabled=\"true\"] /* Fallback for :has */ {\n      background-color: var(--hds-ui-colors-warning-yellow-light-fill);\n\n      &:not(:focus-within) {\n        border-bottom: var(--hds-stroke-thick) solid var(--hds-ui-colors-warning-yellow);\n      }\n\n      margin-bottom: calc(-1 * var(--hds-stroke-default));\n    }\n  }\n\n  /* State: Focus */\n  &:focus-within .hds-input-group__label {\n    color: var(--hds-colors-dark);\n  }\n\n  & .hds-input-group__label {\n    transition: color var(--hds-micro-animation-duration-quick)\n      var(--hds-micro-animation-easing-normal);\n    font: var(--hds-typography-caption);\n  }\n\n  /* State: Read only, no focus */\n  &:has(\n      input.hds-input-group__input:read-only,\n      textarea.hds-input-group__input:read-only,\n      .hds-input-group__input:disabled\n    ):not(:focus-within)\n    .hds-input-group__label {\n    color: var(--hds-ui-colors-dark-grey);\n  }\n\n  & .hds-input-group__input-wrapper {\n    background-color: var(--hds-input-group-background-color);\n    display: flex;\n    flex-flow: row nowrap;\n    width: 100%;\n    border: 0;\n    border-bottom: var(--hds-stroke-default) solid var(--hds-ui-colors-dark-grey);\n    border-top-left-radius: var(--hds-border-radius);\n    border-top-right-radius: var(--hds-border-radius);\n    transition-duration: var(--hds-micro-animation-duration-quick);\n    transition-timing-function: var(--hds-micro-animation-easing-normal);\n    transition-property: border-color;\n    box-sizing: border-box;\n\n    /* State: Focus */\n    &:focus-within,\n    &:has(input.hds-input-group__input:read-only, textarea.hds-input-group__input:read-only):focus-within,\n    &[data-readonly=\"true\"]:focus-within /* Fallback for :has */ {\n      border-bottom: var(--hds-stroke-thick) solid var(--hds-colors-dark);\n\n      /* Since the border size increases when focused, we offset the added height by decreasing the margin */\n      margin-bottom: calc(-1 * var(--hds-stroke-default));\n    }\n\n    /* State: Read only */\n    &:has(input.hds-input-group__input:read-only, textarea.hds-input-group__input:read-only),\n    &[data-readonly=\"true\"] /* Fallback for :has */,\n    &:has(.hds-input-group__input:disabled),\n    &[data-disabled=\"true\"] /* Fallback for :has */ {\n      .hds-input-group__input {\n        color: var(--hds-ui-colors-dark-grey);\n      }\n\n      background-color: var(--hds-ui-colors-grey);\n      border-bottom: var(--hds-stroke-default) solid var(--hds-ui-colors-grey);\n    }\n  }\n\n  & .hds-input-group__input {\n    color: var(--hds-ui-colors-black);\n    width: 100%;\n    padding: var(--hds-spacing-16);\n    font: var(--hds-typography-body-small);\n    line-height: normal;\n    border: 0;\n    background: transparent;\n\n    &::placeholder {\n      color: var(--hds-ui-colors-dark-grey);\n      opacity: 1;\n    }\n\n    &:focus {\n      outline: 0;\n\n      &::placeholder {\n        color: var(--hds-ui-colors-grey);\n      }\n    }\n\n    &:read-only:focus::placeholder {\n      color: var(--hds-ui-colors-dark-grey);\n    }\n  }\n}\n"],"names":[]}