@transferwise/components 0.0.0-experimental-e06e456 → 0.0.0-experimental-e3978a5

package/src/listItem/ListItem.css

@@ -0,0 +1,770 @@
+.wds-list-item-gridWrapper {
+  display: grid;
+  grid-gap: 4px 16px;
+  grid-gap: var(--size-4) var(--size-16);
+  gap: 4px 16px;
+  gap: var(--size-4) var(--size-16);
+}
+@container (min-width: 375px) {
+  .wds-list-item-gridWrapper .wds-list-item-media-image {
+    -o-object-position: center;
+       object-position: center;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media body control" ". info ." ". prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media body control" ". info .";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media body control" ". prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas: "media body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media body" ". info" ". prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media body" ". info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media body" ". prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "media body";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body control" "info ." "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "info .";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas: "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body" "info" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body";
+  }
+}
+@container (min-width: 297px) and (max-width: 375px) {
+  .wds-list-item-gridWrapper .wds-list-item-media-image {
+    -o-object-position: bottom left;
+       object-position: bottom left;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
+    margin-bottom: 12px;
+    margin-bottom: var(--size-12);
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto auto;
+    grid-template-areas: "media media" "body control" "info control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "media" "body" "info" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media media" "body control" "info control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "media" "body" "info" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media media" "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "media" "body" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media media" "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "media" "body" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
+    margin-bottom: 12px;
+    margin-bottom: var(--size-12);
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto auto auto;
+    grid-template-areas: "media media" "body body" "info info" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media media" "body body" "info info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "media media" "body body" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "media" "body";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body control" "info control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "info" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "info control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "info" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas: "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body" "info" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body";
+  }
+}
+@container (max-width: 297px) {
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body control" "info control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "info" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "info control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "info" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "info" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body" "info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body control" "info control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "info" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "info control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-hasInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "info" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body control" "prompt prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-hasPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "prompt" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas: "body control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-hasControl.wds-list-item-noInfo-noPrompt:has(.wds-list-item-button-control) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body" "control";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl .wds-list-item-prompt {
+    grid-column: 1 / -1;
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "body" "info" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-hasInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "info";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-hasPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "body" "prompt";
+  }
+  .wds-list-item-gridWrapper.wds-list-item-noMedia-noControl.wds-list-item-noInfo-noPrompt {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body";
+  }
+  .wds-list-item-gridWrapper .wds-list-item-media {
+    display: none;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-body {
+    grid-area: body;
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: start;
+    grid-gap: 0;
+    gap: 0;
+  }
+  .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
+    text-align: left;
+  }
+}
+.wds-list-item {
+  list-style: none;
+  width: 100%;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  position: relative;
+  padding: 12px 0;
+  padding: var(--size-12) 0;
+  container-type: inline-size;
+}
+.wds-list-item + .wds-list-item-spotlight,
+.wds-list-item-spotlight + .wds-list-item {
+  margin-top: 16px;
+  margin-top: var(--size-16);
+}
+.wds-list-item:focus-within {
+  z-index: 1;
+}
+.wds-list-item-view {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
+}
+.wds-list-item-view.fullyInteractive {
+  margin-bottom: 0;
+}
+.wds-list-item-view.fullyInteractive:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.wds-list-item a {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-interactive .wds-list-item-control:focus-visible,
+.wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
+  outline: none;
+}
+.wds-list-item-interactive .wds-list-item-additional-info {
+  --ring-outline-offset: 0;
+}
+.wds-list-item-interactive a.wds-list-item-control,
+.wds-list-item-interactive a.wds-list-item-control:hover,
+.wds-list-item-interactive a.wds-list-item-control:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-list-item-interactive a.wds-list-item-control:has(.wds-list-item-control_pseudo-element) {
+  position: relative;
+  z-index: 1;
+}
+.wds-list-item-interactive a.wds-list-item-control.wds-list-item-control_pseudo-element:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-control:focus-visible),
+.wds-list-item-interactive.wds-list-item-spotlight:has(input[type="checkbox"]:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  outline-offset: -1px;
+}
+.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-screen-hover);
+}
+.wds-list-item-interactive.wds-list-item-spotlight:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
+.wds-list-item-interactive.wds-list-item-spotlight:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover {
+  background-color: transparent;
+  background-color: initial;
+}
+.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-control:focus-visible):before,
+.wds-list-item-interactive:not(.wds-list-item-spotlight):has(input[type="checkbox"]:focus-visible):before {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  content: '';
+  position: absolute;
+  inset: 0 -8px;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  outline-offset: -1px;
+}
+.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before,
+.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
+  content: '';
+  position: absolute;
+  inset: 0 -8px;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+}
+.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):hover:before {
+  background-color: var(--color-background-screen-hover);
+}
+.wds-list-item-interactive:not(.wds-list-item-spotlight):not(.disabled):not(:disabled):active:before {
+  background-color: var(--color-background-screen-active);
+}
+.wds-list-item-interactive:not(.wds-list-item-spotlight):has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button):hover:before {
+  background-color: transparent;
+  background-color: initial;
+}
+.wds-list-item-interactive:not(.disabled):not(:disabled):hover .wds-list-item-control-wrapper .wds-Button {
+  background-color: var(--Button-background-hover);
+  color: var(--Button-color-hover);
+  transition: none;
+}
+.wds-list-item-interactive .wds-list-item-button-control .wds-Button {
+  transition: none;
+}
+.wds-list-item-media {
+  grid-area: media;
+  display: flex;
+  align-items: start;
+}
+.wds-list-item-media-image-wrapper {
+  width: var(--wds-list-item-media-size);
+  height: var(--wds-list-item-media-size);
+}
+.wds-list-item-media-image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.wds-list-item-body {
+  grid-area: body;
+  align-items: center;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
+  grid-gap: 16px;
+  grid-gap: var(--size-16);
+  gap: 16px;
+  gap: var(--size-16);
+  word-break: break-word;
+}
+.wds-list-item-title,
+.wds-list-item-title-value {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-value {
+  text-align: right;
+}
+.wds-list-item-body-center {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.wds-list-item-additional-info {
+  grid-area: info;
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+  margin-top: calc(4px * -1);
+  margin-top: calc(var(--size-4) * -1);
+}
+.wds-list-item-control-wrapper {
+  grid-area: control;
+  align-content: center;
+  height: var(--wds-list-item-control-wrapper-height);
+}
+.wds-list-item-navigation .tw-icon-chevron-right {
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+}
+.wds-list-item-control {
+  flex: 0 0 auto;
+}
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.wds-list-item-spotlight {
+  padding-left: 12px;
+  padding-left: var(--size-12);
+  padding-right: 12px;
+  padding-right: var(--size-12);
+}
+.wds-list-item-spotlight-active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-spotlight-inactive {
+  background-color: rgba(134, 167, 189, 0.025);
+}
+@supports (color: color-mix(in lch, red, blue)) {
+.wds-list-item-spotlight-inactive {
+  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
+}
+}
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
+  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
+  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}
+.wds-list-item .wds-list-item-spotlight__border {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.wds-list-item .wds-list-item-spotlight__border rect {
+  --wds-list-item-spotlight-borderWidth: 1px;
+  --wds-list-item-spotlight-borderWidthOffset: 0.5px;
+  --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * 0.5);
+  fill: none;
+  stroke: rgba(0,0,0,0.10196);
+  stroke: var(--color-border-neutral);
+  width: calc(100% - 1px);
+  width: calc(100% - var(--wds-list-item-spotlight-borderWidth));
+  height: calc(100% - 1px);
+  height: calc(100% - var(--wds-list-item-spotlight-borderWidth));
+  x: 0.5px;
+  x: var(--wds-list-item-spotlight-borderWidthOffset);
+  y: 0.5px;
+  y: var(--wds-list-item-spotlight-borderWidthOffset);
+  rx: calc(16px - 0.5px);
+  rx: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
+  ry: calc(16px - 0.5px);
+  ry: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
+  stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
+  stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
+}
+.wds-list-item-prompt {
+  grid-area: prompt;
+  display: inline-flex;
+  justify-self: start;
+  text-align: left;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.wds-list-item-prompt:has(a),
+.wds-list-item-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-list-item-prompt a,
+.wds-list-item-prompt button {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-list-item-prompt a:first-of-type:before,
+.wds-list-item-prompt button:first-of-type:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.wds-list-item-prompt.np-prompt-icon {
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  gap: var(--size-4);
+}
+.wds-list-item-prompt .np-prompt-icon {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
+.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a,
+.wds-list-item-prompt.negative button {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-list-item-prompt.negative a:hover,
+.wds-list-item-prompt.negative button:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-list-item-prompt.negative a:active,
+.wds-list-item-prompt.negative button:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.wds-list-item-prompt.positive,
+.wds-list-item-prompt.discount,
+.wds-list-item-prompt.savings {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a,
+.wds-list-item-prompt.discount a,
+.wds-list-item-prompt.savings a,
+.wds-list-item-prompt.positive button,
+.wds-list-item-prompt.discount button,
+.wds-list-item-prompt.savings button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-list-item-prompt.positive a:hover,
+.wds-list-item-prompt.discount a:hover,
+.wds-list-item-prompt.savings a:hover,
+.wds-list-item-prompt.positive button:hover,
+.wds-list-item-prompt.discount button:hover,
+.wds-list-item-prompt.savings button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-list-item-prompt.positive a:active,
+.wds-list-item-prompt.discount a:active,
+.wds-list-item-prompt.savings a:active,
+.wds-list-item-prompt.positive button:active,
+.wds-list-item-prompt.discount button:active,
+.wds-list-item-prompt.savings button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
+.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
+.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
+.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
+.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-list-item-prompt.neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.neutral a,
+.wds-list-item-prompt.neutral button {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-list-item-prompt.warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a,
+.wds-list-item-prompt.warning button {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-list-item-prompt.warning a:hover,
+.wds-list-item-prompt.warning button:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-list-item-prompt.warning a:active,
+.wds-list-item-prompt.warning button:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+}
+.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+}