@inera/ids-design 5.0.3 → 5.1.1

package/global/global.css

@@ -10,12 +10,36 @@
   }
 }
 
+/* This is generated by tailwind/util-tailwind.scss */
 /* Pre-existing utility classes begin here */
 /* Force elements to be displayed as block elements */
 .ids-block {
   display: block !important;
 }
 
+.ids-bg-1 {
+  background-color: white;
+}
+
+.ids-bg-2 {
+  background-color: var(--IDS-COLOR-SECONDARY-95);
+}
+
+/* Removes native button styling */
+.ids-btn-no-styles {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
+.ids-btn-no-styles:focus {
+  outline: var(--focus_outline);
+  outline-offset: var(--focus_outline-offset);
+}
+
 /* Makes elements behave as inline-level block containers */
 .ids-inline-block {
   display: inline-block;
@@ -2245,6 +2269,542 @@
   float: none;
 }
 
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+input.ids-time, .ids-textarea, .ids-select, .ids-input {
+  font-family: var(--font-family_1) !important;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--IDS-INPUT_BACKGROUND);
+  border: var(--IDS-INPUT_BORDER);
+  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
+  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
+  font-size: 16px;
+  color: var(--IDS-INPUT_COLOR);
+  display: block;
+}
+input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+}
+
+input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
+  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+}
+
+.ids-label-wrapper {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.ids-select-wrapper::after, .ids-select ::after {
+  content: "";
+  width: 12px;
+  height: 100%;
+  display: block;
+  position: absolute;
+  transform: rotate(90deg);
+  right: 25px;
+  top: 0px;
+  bottom: 0px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON);
+  pointer-events: none;
+}
+
+/*******
+* Accessibility
+********/
+/* headings */
+.ids-link {
+  font-family: var(--IDS-LINK--FONT-FAMILY);
+  color: var(--link-colorpreset-1_color);
+  text-decoration-color: var(--link-colorpreset-1_color);
+  line-height: 1.5rem;
+  cursor: pointer;
+  display: inline-flex;
+  gap: 8px;
+  align-items: flex-start;
+  text-decoration: none;
+  position: relative;
+}
+.ids-link:not(:has(.ids-link__icon)) {
+  text-decoration: underline;
+}
+.ids-link:focus:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}
+.ids-link:hover, .ids-link:focus {
+  text-decoration: underline;
+  color: var(--link-colorpreset-1-hover_color);
+}
+.ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
+  display: none;
+}
+.ids-link:hover .ids-link__icon--hover, .ids-link:focus .ids-link__icon--hover {
+  display: inline-flex;
+}
+.ids-link.ids-link--block {
+  display: flex;
+}
+.ids-link.ids-link--underlined {
+  text-decoration: underline;
+}
+.ids-link.ids-link--active-icon {
+  text-decoration: none !important;
+}
+.ids-link.ids-link--active-icon .ids-link__icon .ids-link__icon__wrap,
+.ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
+  border-radius: 100%;
+  padding: 3px;
+  align-items: center;
+  justify-content: center;
+}
+.ids-link.ids-link--active-icon:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon:focus-within .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-1-hover_color);
+}
+.ids-link.ids-link--active-icon.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
+  display: none;
+}
+.ids-link.ids-link--active-icon.ids-link--active .ids-link__icon--hover {
+  display: inline-flex;
+}
+.ids-link.ids-link--active-icon.ids-link--active .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-1_color);
+}
+.ids-link.ids-link--active-icon.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-1-hover_color);
+}
+.ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-1-hover_color);
+}
+.ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon .ids-link__icon__wrap,
+.ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
+  border-radius: 100%;
+  padding: 3px;
+  align-items: center;
+  justify-content: center;
+}
+.ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-2-hover_color);
+}
+.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
+  display: none;
+}
+.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon--hover {
+  display: inline-flex;
+}
+.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-2_color);
+}
+.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-2-hover_color);
+}
+.ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-2-hover_color);
+}
+.ids-link.ids-link--color-2 {
+  color: var(--link-colorpreset-2_color);
+  text-decoration-color: var(--link-colorpreset-2_color);
+}
+.ids-link.ids-link--color-2:hover, .ids-link.ids-link--color-2:focus {
+  color: var(--link-colorpreset-2-hover_color);
+  text-decoration-color: var(--link-colorpreset-2-hover_color);
+}
+.ids-link.ids-link--light {
+  color: white !important;
+  text-decoration-color: white !important;
+}
+.ids-link.ids-link--light:focus {
+  outline-color: white !important;
+}
+.ids-link.ids-link--light:hover {
+  color: white !important;
+}
+.ids-link .ids-link__icon,
+.ids-link .ids-link__icon--hover {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 1.5rem;
+}
+.ids-link .ids-link__text {
+  gap: 8px;
+}
+.ids-link .ids-link__icon {
+  display: inline-flex;
+}
+.ids-link .ids-link__icon--hover {
+  display: none;
+}
+
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+input.ids-time, .ids-textarea, .ids-select, .ids-input {
+  font-family: var(--font-family_1) !important;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--IDS-INPUT_BACKGROUND);
+  border: var(--IDS-INPUT_BORDER);
+  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
+  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
+  font-size: 16px;
+  color: var(--IDS-INPUT_COLOR);
+  display: block;
+}
+input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+}
+
+input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
+  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+}
+
+.ids-label-wrapper {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.ids-select-wrapper::after, .ids-select ::after {
+  content: "";
+  width: 12px;
+  height: 100%;
+  display: block;
+  position: absolute;
+  transform: rotate(90deg);
+  right: 25px;
+  top: 0px;
+  bottom: 0px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON);
+  pointer-events: none;
+}
+
+/*******
+* Accessibility
+********/
+/* headings */
+.ids .ids-button.ids-button--secondary.ids-button--disabled, .ids .ids-button.ids-button--secondary[disabled],
+.ids-button.ids-button--secondary.ids-button--disabled,
+.ids-button.ids-button--secondary[disabled],
+.ids button.ids-button.ids-button--secondary.ids-button--disabled,
+.ids button.ids-button.ids-button--secondary[disabled], .ids .ids-button.ids-button--disabled, .ids .ids-button[disabled],
+.ids-button.ids-button--disabled,
+.ids-button[disabled],
+.ids button.ids-button.ids-button--disabled,
+.ids button.ids-button[disabled] {
+  color: var(--btn-disabled_color) !important;
+  border: var(--btn-disabled_border) !important;
+  background-color: white !important;
+}
+
+.ids button.ids-button {
+  min-width: 24px;
+  min-height: 24px;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ids button.ids-button:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}
+
+.ids .ids-button,
+.ids-button,
+.ids button.ids-button {
+  text-align: center;
+  background-color: var(--btn_background-color);
+  border: var(--btn_border);
+  border-radius: var(--btn_border-radius);
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  padding: var(--btn-m_padding);
+  gap: 8px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--btn_font-family);
+  font-weight: var(--btn_font-weight);
+  text-transform: uppercase;
+  user-select: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  font-size: 1rem;
+  min-height: var(--btn-m_height);
+  line-height: 22px;
+}
+.ids .ids-button:hover, .ids .ids-button:active, .ids .ids-button:focus, .ids .ids-button.ids-button--active,
+.ids-button:hover,
+.ids-button:active,
+.ids-button:focus,
+.ids-button.ids-button--active,
+.ids button.ids-button:hover,
+.ids button.ids-button:active,
+.ids button.ids-button:focus,
+.ids button.ids-button.ids-button--active {
+  background-color: var(--btn-active_background-color);
+  box-shadow: var(--btn-active_box-shadow);
+}
+.ids .ids-button.ids-button--s,
+.ids-button.ids-button--s,
+.ids button.ids-button.ids-button--s {
+  font-size: 0.875rem;
+  min-height: var(--btn-s_height);
+  padding: var(--btn-s_padding);
+}
+.ids .ids-button.ids-button--l,
+.ids-button.ids-button--l,
+.ids button.ids-button.ids-button--l {
+  font-size: 1.125rem;
+  min-height: var(--btn-l_height);
+  padding: var(--btn-l_padding);
+}
+.ids .ids-button.ids-button--loading,
+.ids-button.ids-button--loading,
+.ids button.ids-button.ids-button--loading {
+  pointer-events: none !important;
+}
+.ids .ids-button.ids-button--secondary,
+.ids-button.ids-button--secondary,
+.ids button.ids-button.ids-button--secondary {
+  background-color: white;
+  border: var(--btn-secondary_border);
+  color: var(--btn-secondary_color);
+  min-height: var(--btn-secondary-m_height);
+  padding: var(--btn-secondary-m_padding);
+}
+.ids .ids-button.ids-button--secondary.ids-button--s,
+.ids-button.ids-button--secondary.ids-button--s,
+.ids button.ids-button.ids-button--secondary.ids-button--s {
+  min-height: var(--btn-secondary-s_height);
+  padding: var(--btn-secondary-s_padding);
+}
+.ids .ids-button.ids-button--secondary.ids-button--l,
+.ids-button.ids-button--secondary.ids-button--l,
+.ids button.ids-button.ids-button--secondary.ids-button--l {
+  min-height: var(--btn-secondary-l_height);
+  padding: var(--btn-secondary-l_padding);
+}
+.ids .ids-button.ids-button--secondary.ids-button--active, .ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary:focus, .ids .ids-button.ids-button--secondary:active,
+.ids-button.ids-button--secondary.ids-button--active,
+.ids-button.ids-button--secondary:hover,
+.ids-button.ids-button--secondary:focus,
+.ids-button.ids-button--secondary:active,
+.ids button.ids-button.ids-button--secondary.ids-button--active,
+.ids button.ids-button.ids-button--secondary:hover,
+.ids button.ids-button.ids-button--secondary:focus,
+.ids button.ids-button.ids-button--secondary:active {
+  background-color: var(--btn-active_background-color);
+  color: white;
+  border: 1px solid var(--btn-active_background-color);
+}
+.ids .ids-button.ids-button--tertiary,
+.ids-button.ids-button--tertiary,
+.ids button.ids-button.ids-button--tertiary {
+  background: transparent;
+  border-radius: 0px;
+  border: none;
+  color: var(--btn-tertiary_color);
+  box-shadow: none;
+  line-height: 22px;
+  font-family: var(--font-family_2);
+  text-decoration: underline;
+}
+.ids .ids-button.ids-button--tertiary.ids-button--active, .ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary:active, .ids .ids-button.ids-button--tertiary:focus,
+.ids-button.ids-button--tertiary.ids-button--active,
+.ids-button.ids-button--tertiary:hover,
+.ids-button.ids-button--tertiary:active,
+.ids-button.ids-button--tertiary:focus,
+.ids button.ids-button.ids-button--tertiary.ids-button--active,
+.ids button.ids-button.ids-button--tertiary:hover,
+.ids button.ids-button.ids-button--tertiary:active,
+.ids button.ids-button.ids-button--tertiary:focus {
+  background-color: var(--btn-active_background-color);
+  color: white;
+  border-radius: var(--btn_border-radius);
+}
+.ids .ids-button.ids-button--tertiary.ids-button--disabled, .ids .ids-button.ids-button--tertiary[disabled],
+.ids-button.ids-button--tertiary.ids-button--disabled,
+.ids-button.ids-button--tertiary[disabled],
+.ids button.ids-button.ids-button--tertiary.ids-button--disabled,
+.ids button.ids-button.ids-button--tertiary[disabled] {
+  border: none !important;
+  text-decoration: underline !important;
+  color: var(--btn-disabled_color);
+  text-decoration: none;
+}
+.ids .ids-button.ids-button--submit,
+.ids-button.ids-button--submit,
+.ids button.ids-button.ids-button--submit {
+  height: 3.75em !important;
+  border-radius: var(--btn-submit_border-radius);
+}
+.ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
+.ids-button.ids-button--icon,
+.ids-button.ids-button--fab,
+.ids button.ids-button.ids-button--icon,
+.ids button.ids-button.ids-button--fab {
+  width: 44px;
+  height: 44px !important;
+  border-radius: 100%;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 0px !important;
+  font-size: 20px;
+  padding: 0px !important;
+  justify-content: center;
+}
+.ids .ids-button.ids-button--icon.ids-button--s, .ids .ids-button.ids-button--fab.ids-button--s,
+.ids-button.ids-button--icon.ids-button--s,
+.ids-button.ids-button--fab.ids-button--s,
+.ids button.ids-button.ids-button--icon.ids-button--s,
+.ids button.ids-button.ids-button--fab.ids-button--s {
+  width: 30px;
+  height: 30px !important;
+}
+.ids .ids-button.ids-button--icon.ids-button--l, .ids .ids-button.ids-button--fab.ids-button--l,
+.ids-button.ids-button--icon.ids-button--l,
+.ids-button.ids-button--fab.ids-button--l,
+.ids button.ids-button.ids-button--icon.ids-button--l,
+.ids button.ids-button.ids-button--fab.ids-button--l {
+  width: 60px;
+  height: 60px !important;
+}
+.ids .ids-button.ids-button--fab,
+.ids-button.ids-button--fab,
+.ids button.ids-button.ids-button--fab {
+  background-color: white;
+  border: var(--btn-fab_border);
+  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3));
+}
+.ids .ids-button.ids-button--icon.ids-button--secondary,
+.ids-button.ids-button--icon.ids-button--secondary,
+.ids button.ids-button.ids-button--icon.ids-button--secondary {
+  background-color: var(--btn-icon-secondary_background-color);
+}
+.ids .ids-button.ids-button--icon.ids-button--active, .ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon:active, .ids .ids-button.ids-button--icon:focus,
+.ids-button.ids-button--icon.ids-button--active,
+.ids-button.ids-button--icon:hover,
+.ids-button.ids-button--icon:active,
+.ids-button.ids-button--icon:focus,
+.ids button.ids-button.ids-button--icon.ids-button--active,
+.ids button.ids-button.ids-button--icon:hover,
+.ids button.ids-button.ids-button--icon:active,
+.ids button.ids-button.ids-button--icon:focus {
+  background-color: var(--btn-icon-secondary--hover_background-color);
+  color: white;
+}
+.ids .ids-button.ids-button--submit,
+.ids-button.ids-button--submit,
+.ids button.ids-button.ids-button--submit {
+  height: var(--btn-submit_height);
+  border-radius: var(--btn-submit_border-radius);
+  line-height: var(--btn-submit_height);
+}
+.ids .ids-button.ids-button--search,
+.ids-button.ids-button--search,
+.ids button.ids-button.ids-button--search {
+  height: var(--btn-search_height);
+  padding: 0px 30px !important;
+  font-size: var(--btn-search_font-size);
+  border-radius: var(--btn-search_border-radius);
+}
+.ids .ids-button.ids-button--search.ids-button--s,
+.ids-button.ids-button--search.ids-button--s,
+.ids button.ids-button.ids-button--search.ids-button--s {
+  height: var(--btn-search-s_height);
+  font-size: var(--btn-search-s_font-size);
+}
+@media (max-width: 1024px) {
+  .ids .ids-button.ids-button--search,
+  .ids-button.ids-button--search,
+  .ids button.ids-button.ids-button--search {
+    font-size: var(--btn-search-mobile_font-size) !important;
+    padding: 0px 14px !important;
+    height: var(--btn-search-mobile_height) !important;
+  }
+}
+.ids .ids-button.ids-button--block,
+.ids-button.ids-button--block,
+.ids button.ids-button.ids-button--block {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+@media (max-width: 1024px) {
+  .ids .ids-button.ids-button--m-block,
+  .ids-button.ids-button--m-block,
+  .ids button.ids-button.ids-button--m-block {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+@media (max-width: 640px) {
+  .ids .ids-button.ids-button--s-block,
+  .ids-button.ids-button--s-block,
+  .ids button.ids-button.ids-button--s-block {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.ids .ids-button.ids-button--disabled, .ids .ids-button[disabled],
+.ids-button.ids-button--disabled,
+.ids-button[disabled],
+.ids button.ids-button.ids-button--disabled,
+.ids button.ids-button[disabled] {
+  pointer-events: none;
+}
+.ids .ids-button:focus,
+.ids-button:focus,
+.ids button.ids-button:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}
+
 .ids-label {
   display: inline-block;
   color: var(--IDS-FORM__LABEL__COLOR);
@@ -2264,67 +2824,107 @@
 }
 
 .ids-radio,
-ids-radio input {
-  position: absolute;
-  opacity: 0;
-}
-
-ids-radio *[slot=tooltip] {
-  margin-left: 5px;
-}
-
-.ids-label--radio {
-  display: inline-flex;
-  align-items: flex-start;
+.ids-radio input,
+input[type=radio] {
   cursor: pointer;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  width: 20px;
+  height: 20px;
+  color: var(--IDS-COLOR-ACCENT-40);
+  border: 1px solid var(--IDS-COLOR-ACCENT-40);
+  background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
+  border-radius: 50%;
+  transform: translateY(4px);
+  position: relative;
 }
-.ids-label--radio.ids-label--light:before {
+.ids-radio.ids-input--light,
+.ids-radio input.ids-input--light,
+input[type=radio].ids-input--light {
+  background-color: white;
+}
+.ids-radio.ids-input--light::before,
+.ids-radio input.ids-input--light::before,
+input[type=radio].ids-input--light::before {
+  border: 2px solid white;
   background-color: white;
 }
-.ids-label--radio:before {
+.ids-radio::before,
+.ids-radio input::before,
+input[type=radio]::before {
   content: "";
-  flex: 0 0 auto;
-  background: var(--IDS-RADIO__BACKGROUND-COLOR);
-  box-sizing: border-box;
-  border-radius: 100%;
-  border: var(--IDS-RADIO__BORDER);
+  position: absolute;
   display: inline-block;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-top: 1px;
-  position: relative;
   cursor: pointer;
-  text-align: center;
-  margin-right: 0.625rem;
-}
-input[type=radio]:checked + .ids-label--radio:before {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
+}
+.ids-radio:checked::before,
+.ids-radio input:checked::before,
+input[type=radio]:checked::before {
+  border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
-  box-shadow: inset 0 0 0 2px white;
 }
-input[type=radio]:disabled + .ids-label--radio:before {
+.ids-radio:disabled,
+.ids-radio input:disabled,
+input[type=radio]:disabled {
+  cursor: default;
+  background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   background-image: var(--IDS-RADIO--DISABLED_BACKGROUND-IMAGE);
-  background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
-  border: none;
+  border: 0;
 }
-input[type=radio][aria-invalid=true]:not(:checked) + .ids-label--radio:before {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
+.ids-radio:disabled::before,
+.ids-radio input:disabled::before,
+input[type=radio]:disabled::before {
+  cursor: default;
+  background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+  border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+  top: 1px;
+  left: 1px;
+}
+.ids-radio:disabled:checked::before,
+.ids-radio input:disabled:checked::before,
+input[type=radio]:disabled:checked::before {
+  border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR);
+}
+.ids-radio[aria-invalid=true]:not(:checked),
+.ids-radio input[aria-invalid=true]:not(:checked),
+input[type=radio][aria-invalid=true]:not(:checked) {
+  background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
   background-image: var(--IDS-RADIO--INVALID_BACKGROUND-IMAGE);
+  border: 0;
 }
-.ids-label--radio.ids-label--disabled {
-  cursor: default;
+.ids-radio[aria-invalid=true]:not(:checked)::before,
+.ids-radio input[aria-invalid=true]:not(:checked)::before,
+input[type=radio][aria-invalid=true]:not(:checked)::before {
+  border: 2px solid var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
+  top: 1px;
+  left: 1px;
 }
-.ids-label--radio.ids-label--disabled:before {
-  cursor: default;
+
+.ids-label--radio {
+  cursor: pointer;
+  padding-left: 8px;
+  margin-bottom: 0;
 }
-input:focus + .ids-label--radio::before {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
+.ids-label--radio.ids-label--disabled {
+  cursor: default;
 }
 
-.ids-radio:disabled,
-ids-radio input:disabled {
-  cursor: default;
+ids-radio {
+  display: flex;
+  align-items: baseline;
+}
+ids-radio *[slot=tooltip] {
+  margin-left: 5px;
 }
 
 .ids-checkbox-label::before {
@@ -2437,15 +3037,15 @@ input.ids-time, .ids-textarea, .ids-select, .ids-input {
   color: var(--IDS-INPUT_COLOR);
   display: block;
 }
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-input.ids-input--invalid {
+input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
 }
 
 input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
 
@@ -2474,6 +3074,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
 /*******
 * Accessibility
 ********/
+/* headings */
 .ids-input {
   width: 100%;
 }
@@ -2486,12 +3087,6 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   font-size: 18px !important;
 }
 
-.ids-input:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
-}
-
 .ids-input__hint {
   margin-top: 5px;
   font-family: var(--font-family_1);
@@ -2630,15 +3225,15 @@ input.ids-time, .ids-textarea, .ids-select, .ids-input {
   color: var(--IDS-INPUT_COLOR);
   display: block;
 }
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-input.ids-input--invalid {
+input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
 }
 
 input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
 
@@ -2667,6 +3262,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
 /*******
 * Accessibility
 ********/
+/* headings */
 .ids-select.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   background-image: var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);
@@ -2732,15 +3328,15 @@ input.ids-time, .ids-textarea, .ids-input, .ids-select {
   color: var(--IDS-INPUT_COLOR);
   display: block;
 }
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-input.ids-input--invalid {
+input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
 }
 
 input.ids-time:disabled, .ids-textarea:disabled, .ids-input:disabled, .ids-select:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
 
@@ -2769,7 +3365,8 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-input:disabled, .ids-selec
 /*******
 * Accessibility
 ********/
-.ids-textarea.ids-input--light {
+/* headings */
+.ids-textarea.ids-input--light, .ids-textarea.ids-textarea--light {
   background-color: white;
 }
 .ids-textarea.ids-textarea--autosize {
@@ -2808,15 +3405,15 @@ input.ids-time, .ids-input, .ids-select, .ids-textarea {
   color: var(--IDS-INPUT_COLOR);
   display: block;
 }
-input.ids-time.ids-input--invalid, .ids-input.ids-input--invalid, .ids-textarea.ids-input--invalid {
+input.ids-time.ids-input--invalid, .ids-input.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
 }
 
 input.ids-time:disabled, .ids-input:disabled, .ids-select:disabled, .ids-textarea:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
 
@@ -2845,6 +3442,7 @@ input.ids-time:disabled, .ids-input:disabled, .ids-select:disabled, .ids-textare
 /*******
 * Accessibility
 ********/
+/* headings */
 .ids-time-input-wrapper {
   position: relative;
   display: flex;