banhaten 0.1.0

package/registry/components/expanded/slideout.css

@@ -0,0 +1,955 @@
+.ds-slideout {
+  --slideout-bg-raised: var(--bh-bg-raised);
+  --slideout-bg-default: var(--bh-bg-default);
+  --slideout-bg-dim: var(--bh-bg-dim);
+  --slideout-bg-muted: var(--bh-bg-muted);
+  --slideout-bg-neutral: var(--bh-bg-neutral-subtle);
+  --slideout-border-subtle: var(--bh-border-subtle);
+  --slideout-border-default: var(--bh-border-default);
+  --slideout-border-input: var(--bh-border-input);
+  --slideout-brand: var(--bh-content-brand-default);
+  --slideout-brand-action: var(--bh-interactive-brand-default);
+  --slideout-content-default: var(--bh-content-default);
+  --slideout-content-subtle: var(--bh-content-subtle);
+  --slideout-content-link: var(--bh-content-link);
+  --slideout-content-success: var(--bh-content-success-default);
+  --slideout-on-brand: var(--bh-content-on-brand);
+  --slideout-on-color: var(--bh-content-on-color);
+  --slideout-radius-control: var(--bh-control-default);
+  --slideout-radius-lg: var(--bh-radius-lg-8);
+  --slideout-radius-xl: var(--bh-radius-2xl-12);
+  --slideout-radius-full: var(--bh-radius-full);
+  --slideout-space-xxs: var(--bh-space-xxs-2);
+  --slideout-space-xs: var(--bh-space-xs-4);
+  --slideout-space-sm: var(--bh-space-sm-6);
+  --slideout-space-md: var(--bh-space-md-8);
+  --slideout-space-lg: var(--bh-space-lg-10);
+  --slideout-space-xl: var(--bh-space-xl-12);
+  --slideout-space-2xl: var(--bh-space-2xl-14);
+  --slideout-space-3xl: var(--bh-space-3xl-16);
+  --slideout-space-4xl: var(--bh-space-4xl-20);
+  --slideout-space-5xl: var(--bh-space-5xl-24);
+  --slideout-space-6xl: var(--bh-space-6xl-32);
+  --slideout-space-7xl: var(--bh-space-7xl-40);
+  --slideout-panel-width: calc(var(--bh-space-18xl-320) + var(--bh-space-4xl-20));
+  --slideout-outer-width: calc(var(--slideout-panel-width) + var(--bh-space-3xl-16));
+  --slideout-height: calc(var(--bh-space-19xl-384) + var(--bh-space-19xl-384) + var(--bh-space-12xl-128) + var(--bh-space-xs-4));
+  --slideout-header-height: var(--bh-space-9xl-64);
+  --slideout-control-height-sm: var(--bh-space-6xl-32);
+  --slideout-control-height-md: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  --slideout-control-height-lg: var(--bh-space-7xl-40);
+  --slideout-close-mobile-size: var(--bh-space-5xl-24);
+  --slideout-scrollbar-size: var(--bh-space-xl-12);
+  --slideout-scrollbar-border: var(--bh-space-xs-4);
+  --slideout-choice-size: var(--bh-space-3xl-16);
+  --slideout-dot-size: var(--bh-space-sm-6);
+  --slideout-avatar-status-offset: calc(-1 * var(--bh-space-xxxs-1));
+  --slideout-shadow-control: var(--shadow-button-raised);
+  --slideout-shadow-surface: var(--shadow-component-default);
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  width: var(--slideout-outer-width);
+  height: var(--slideout-height);
+  padding: var(--slideout-space-md);
+  overflow: hidden;
+  color: var(--slideout-content-default);
+  background: transparent;
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-md-regular-font-size);
+  line-height: var(--bh-text-body-md-regular-line-height);
+  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
+}
+
+.ds-slideout *,
+.ds-slideout *::before,
+.ds-slideout *::after {
+  box-sizing: border-box;
+}
+
+.ds-slideout--medium {
+  --slideout-panel-width: calc(var(--bh-space-19xl-384) + var(--bh-space-3xl-16));
+  --slideout-outer-width: calc(var(--slideout-panel-width) + var(--bh-space-3xl-16));
+}
+
+.ds-slideout--large {
+  --slideout-panel-width: calc(var(--bh-space-19xl-384) + var(--bh-space-11xl-96) + var(--bh-space-4xl-20));
+  --slideout-outer-width: calc(var(--slideout-panel-width) + var(--bh-space-3xl-16));
+}
+
+.ds-slideout--mobile {
+  --slideout-panel-width: calc(var(--bh-space-19xl-384) - var(--bh-space-md-8) - var(--bh-space-xxxs-1));
+  --slideout-outer-width: var(--slideout-panel-width);
+  --slideout-height: calc(var(--bh-space-19xl-384) + var(--bh-space-19xl-384) + var(--bh-space-7xl-40) + var(--bh-space-xs-4));
+  padding: 0;
+}
+
+.ds-slideout--rtl {
+  font-family: var(--bh-font-family);
+}
+
+.ds-slideout__panel {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: var(--slideout-panel-width);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
+  border-radius: var(--slideout-radius-xl);
+  background: var(--slideout-bg-raised);
+}
+
+.ds-slideout--mobile .ds-slideout__panel {
+  border-radius: 0;
+}
+
+.ds-slideout__header {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--slideout-space-3xl);
+  min-height: var(--slideout-header-height);
+  padding: var(--slideout-space-3xl) var(--slideout-space-3xl) var(--slideout-space-3xl) var(--slideout-space-4xl);
+  border-bottom: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
+  background: var(--slideout-bg-raised);
+}
+
+.ds-slideout--mobile .ds-slideout__header {
+  gap: var(--slideout-space-lg);
+}
+
+.ds-slideout--rtl .ds-slideout__header {
+  padding-right: var(--slideout-space-4xl);
+  padding-left: var(--slideout-space-3xl);
+}
+
+.ds-slideout__heading-wrap {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  gap: var(--slideout-space-xl);
+  min-width: 0;
+}
+
+.ds-slideout__title {
+  flex: 1 1 0;
+  min-width: 0;
+  margin: 0;
+  color: var(--slideout-content-default);
+  font-size: var(--bh-text-heading-sm-medium-font-size);
+  font-weight: var(--bh-text-heading-sm-medium-font-weight);
+  line-height: var(--bh-text-heading-sm-medium-line-height);
+  overflow-wrap: anywhere;
+}
+
+.ds-slideout--mobile .ds-slideout__title {
+  font-size: var(--bh-text-heading-xs-medium-font-size);
+  line-height: var(--bh-text-heading-xs-medium-line-height);
+}
+
+.ds-slideout__text-button,
+.ds-slideout__close,
+.ds-slideout__button,
+.ds-payment-detail__story,
+.ds-payment-form__select,
+.ds-feed-item__files button,
+.ds-slideout-profile__tab {
+  border: 0;
+  margin: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+}
+
+.ds-slideout__text-button {
+  flex: 0 0 auto;
+  height: var(--slideout-control-height-sm);
+  padding: var(--slideout-space-md) var(--slideout-space-lg);
+  border-radius: var(--slideout-radius-control);
+  color: var(--slideout-content-link);
+  background: transparent;
+  font-weight: var(--bh-font-weight-medium);
+}
+
+.ds-slideout__close {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--slideout-control-height-sm);
+  height: var(--slideout-control-height-sm);
+  padding: 0;
+  border-radius: var(--slideout-radius-full);
+  color: var(--slideout-content-subtle);
+  background: transparent;
+}
+
+.ds-slideout--mobile .ds-slideout__close {
+  width: var(--slideout-close-mobile-size);
+  height: var(--slideout-close-mobile-size);
+}
+
+.ds-slideout__body {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  padding: var(--slideout-space-4xl);
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-color: var(--bh-bg-neutral-medium) transparent;
+  scrollbar-width: thin;
+}
+
+.ds-slideout__body::-webkit-scrollbar {
+  width: var(--slideout-scrollbar-size);
+}
+
+.ds-slideout__body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ds-slideout__body::-webkit-scrollbar-thumb {
+  border: var(--slideout-scrollbar-border) solid transparent;
+  border-radius: var(--slideout-radius-full);
+  background: var(--bh-bg-neutral-medium);
+  background-clip: padding-box;
+}
+
+.ds-slideout__footer {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: var(--slideout-space-md);
+  padding: var(--slideout-space-4xl);
+  border-top: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
+  background: var(--slideout-bg-raised);
+}
+
+.ds-slideout__button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--slideout-control-height-lg);
+  padding: var(--slideout-space-md) var(--slideout-space-lg);
+  border-radius: var(--slideout-radius-control);
+  font-weight: var(--bh-font-weight-medium);
+  line-height: var(--bh-text-body-md-medium-line-height);
+  white-space: nowrap;
+}
+
+.ds-slideout__button--primary {
+  color: var(--slideout-on-brand);
+  background: var(--slideout-brand-action);
+  box-shadow: var(--slideout-shadow-control);
+}
+
+.ds-slideout__button--secondary {
+  color: var(--slideout-content-default);
+  background: var(--slideout-bg-neutral);
+  box-shadow: var(--shadow-button-soft);
+}
+
+.ds-slideout__text-button:hover,
+.ds-slideout__close:hover,
+.ds-slideout__button--secondary:hover,
+.ds-payment-detail__story:hover,
+.ds-feed-item__files button:hover,
+.ds-slideout-profile__tab:hover {
+  background: var(--bh-interactive-ghost-hover);
+}
+
+.ds-slideout__text-button:focus-visible,
+.ds-slideout__close:focus-visible,
+.ds-slideout__button:focus-visible,
+.ds-payment-detail__story:focus-visible,
+.ds-payment-form__select:focus-visible,
+.ds-feed-item__files button:focus-visible,
+.ds-slideout-profile__tab:focus-visible {
+  outline: var(--slideout-space-xxs) solid var(--slideout-brand);
+  outline-offset: var(--slideout-space-xxs);
+}
+
+.ds-slideout-slot {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
+.ds-slideout-filters {
+  gap: var(--slideout-space-5xl);
+}
+
+.ds-filter-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--slideout-space-3xl);
+  width: 100%;
+}
+
+.ds-filter-section h3,
+.ds-payment-card h3,
+.ds-payment-form__section h3 {
+  margin: 0;
+  color: var(--slideout-content-default);
+  font-size: var(--bh-text-heading-xs-medium-font-size);
+  font-weight: var(--bh-text-heading-xs-medium-font-weight);
+  line-height: var(--bh-text-heading-xs-medium-line-height);
+}
+
+.ds-filter-section__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--slideout-space-xl);
+  width: 100%;
+}
+
+.ds-choice-row {
+  display: flex;
+  align-items: center;
+  gap: var(--slideout-space-md);
+  width: 100%;
+  min-height: var(--slideout-space-5xl);
+}
+
+.ds-choice-row__control {
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--slideout-choice-size);
+  height: var(--slideout-choice-size);
+  border: var(--bh-space-xxxs-1) solid var(--slideout-border-input);
+  color: var(--slideout-on-brand);
+  background: var(--slideout-bg-default);
+  box-shadow: var(--shadow-checkbox-control);
+}
+
+.ds-choice-row__control--checkbox {
+  border-radius: var(--bh-radius-sm-4);
+}
+
+.ds-choice-row__control--radio {
+  border-radius: var(--slideout-radius-full);
+}
+
+.ds-choice-row__control.is-checked {
+  border-color: var(--slideout-brand);
+  background: var(--slideout-brand);
+}
+
+.ds-choice-row__dot {
+  width: var(--slideout-dot-size);
+  height: var(--slideout-dot-size);
+  border-radius: var(--slideout-radius-full);
+  background: var(--slideout-on-brand);
+}
+
+.ds-choice-row__label {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.ds-slideout-divider {
+  display: block;
+  width: 100%;
+  height: var(--bh-space-xxxs-1);
+  background: var(--slideout-border-subtle);
+}
+
+.ds-user-choice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--slideout-space-md);
+  width: 100%;
+  min-height: var(--slideout-control-height-lg);
+  padding-block: var(--slideout-space-md);
+}
+
+.ds-user-choice__person {
+  display: flex;
+  align-items: center;
+  gap: var(--slideout-space-md);
+  min-width: 0;
+}
+
+.ds-user-choice__person span:last-child {
+  min-width: 0;
+  color: var(--slideout-content-default);
+  font-weight: var(--bh-font-weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-choice__person .is-muted {
+  color: var(--slideout-content-subtle);
+}
+
+.ds-user-choice__check {
+  flex: 0 0 auto;
+  color: var(--slideout-content-default);
+}
+
+.ds-avatar {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
+  border-radius: var(--slideout-radius-full);
+  background:
+    radial-gradient(circle at 65% 28%, var(--bh-bg-always-white), transparent 18%),
+    linear-gradient(135deg, var(--bh-bg-inverse), var(--bh-bg-always-dark) 55%, var(--bh-bg-accent-amber-soft));
+  color: var(--slideout-on-color);
+  font-size: var(--bh-text-body-3xs-semibold-font-size);
+  font-weight: var(--bh-text-body-3xs-semibold-font-weight);
+  line-height: var(--bh-text-body-3xs-semibold-line-height);
+  text-transform: uppercase;
+}
+
+.ds-avatar--small {
+  width: var(--slideout-space-5xl);
+  height: var(--slideout-space-5xl);
+}
+
+.ds-avatar--medium {
+  width: var(--slideout-control-height-lg);
+  height: var(--slideout-control-height-lg);
+  font-size: var(--bh-text-body-xs-medium-font-size);
+}
+
+.ds-avatar--large {
+  width: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
+  height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
+  font-size: var(--bh-text-body-md-medium-font-size);
+}
+
+.ds-avatar__status {
+  position: absolute;
+  right: var(--slideout-avatar-status-offset);
+  bottom: var(--slideout-avatar-status-offset);
+  width: var(--slideout-space-2xl);
+  height: var(--slideout-space-2xl);
+  border: var(--slideout-space-xxs) solid var(--slideout-bg-raised);
+  border-radius: var(--slideout-radius-full);
+  background: var(--bh-bg-success-default);
+}
+
+.ds-slideout-profile {
+  gap: var(--slideout-space-6xl);
+}
+
+.ds-slideout-profile__header {
+  display: flex;
+  align-items: center;
+  gap: var(--slideout-space-xl);
+  width: 100%;
+}
+
+.ds-slideout-profile__identity {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: var(--slideout-space-xxs);
+  min-width: 0;
+}
+
+.ds-slideout-profile__name,
+.ds-slideout-profile__role,
+.ds-feed-item p,
+.ds-feed-item time,
+.ds-payment-detail p,
+.ds-payment-form p {
+  margin: 0;
+}
+
+.ds-slideout-profile__name {
+  color: var(--slideout-content-default);
+  font-size: var(--bh-text-heading-xs-medium-font-size);
+  font-weight: var(--bh-text-heading-xs-medium-font-weight);
+  line-height: var(--bh-text-heading-xs-medium-line-height);
+}
+
+.ds-slideout-profile__role {
+  color: var(--slideout-content-subtle);
+}
+
+.ds-slideout-profile__tabs {
+  display: flex;
+  align-items: center;
+  gap: var(--slideout-space-3xl);
+  min-height: var(--slideout-control-height-lg);
+  width: 100%;
+  overflow-x: auto;
+  border-bottom: var(--bh-space-xxxs-1) solid var(--slideout-border-default);
+}
+
+.ds-slideout-profile__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--slideout-space-xs);
+  min-height: var(--slideout-control-height-lg);
+  padding: var(--slideout-space-md) 0;
+  border-bottom: var(--slideout-space-xxs) solid transparent;
+  color: var(--slideout-content-subtle);
+  background: transparent;
+  white-space: nowrap;
+}
+
+.ds-slideout-profile__tab[aria-selected="true"] {
+  border-bottom-color: var(--slideout-brand);
+  color: var(--slideout-content-default);
+  font-weight: var(--bh-font-weight-medium);
+}
+
+.ds-slideout-profile__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--slideout-space-5xl);
+  height: var(--slideout-space-5xl);
+  padding-inline: var(--slideout-space-xs);
+  border-radius: var(--slideout-radius-full);
+  background: var(--slideout-bg-neutral);
+  color: var(--slideout-content-default);
+  font-size: var(--bh-text-body-3xs-semibold-font-size);
+  font-weight: var(--bh-text-body-3xs-semibold-font-weight);
+  line-height: var(--bh-text-body-3xs-semibold-line-height);
+}
+
+.ds-slideout-feed {
+  display: flex;
+  flex-direction: column;
+  gap: var(--slideout-space-4xl);
+  width: 100%;
+}
+
+.ds-feed-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--slideout-space-3xl);
+  width: 100%;
+}
+
+.ds-feed-item__heading {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--slideout-space-4xl);
+  width: 100%;
+}
+
+.ds-feed-item__copy {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: var(--slideout-space-xs);
+  min-width: 0;
+}
+
+.ds-feed-item__copy p {
+  color: var(--slideout-content-subtle);
+  overflow-wrap: anywhere;
+}
+
+.ds-feed-item__copy strong {
+  color: var(--slideout-content-default);
+  font-weight: var(--bh-font-weight-medium);
+}
+
+.ds-feed-item__copy a {
+  color: var(--slideout-content-link);
+  font-weight: var(--bh-font-weight-medium);
+  text-decoration: none;
+}
+
+.ds-feed-item time {
+  color: var(--slideout-content-subtle);
+}
+
+.ds-feed-item__indicator {
+  width: var(--slideout-dot-size);
+  height: var(--slideout-dot-size);
+  margin-top: calc(var(--slideout-space-lg) - var(--bh-space-xxxs-1));
+  border-radius: var(--slideout-radius-full);
+  background: var(--slideout-content-success);
+}
+
+.ds-feed-item__comment {
+  width: 100%;
+  padding: var(--slideout-space-xl);
+  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
+  border-radius: var(--slideout-radius-lg);
+  color: var(--slideout-content-subtle);
+  background: var(--slideout-bg-default);
+}
+
+.ds-feed-item__images {
+  display: flex;
+  gap: var(--slideout-space-xl);
+  width: 100%;
+  overflow: hidden;
+}
+
+.ds-feed-item__image {
+  display: block;
+  flex: 1 1 0;
+  min-width: calc(var(--bh-space-12xl-128) - var(--slideout-space-md));
+  height: calc(var(--bh-space-11xl-96) + var(--slideout-space-xs));
+  border-radius: var(--slideout-radius-lg);
+  background-size: cover;
+  background-position: center;
+}
+
+.ds-feed-item__image--one {
+  background:
+    radial-gradient(circle at 50% 28%, var(--bh-bg-warning-subtle) 0 8%, transparent 9%),
+    radial-gradient(circle at 52% 34%, var(--bh-bg-always-white) 0 12%, transparent 13%),
+    linear-gradient(145deg, var(--bh-bg-accent-aqua-soft), var(--bh-bg-accent-amber-soft));
+}
+
+.ds-feed-item__image--two {
+  background:
+    radial-gradient(circle at 70% 35%, var(--bh-bg-always-white), transparent 22%),
+    linear-gradient(135deg, var(--bh-bg-accent-purple-default), var(--bh-bg-accent-rose-soft) 55%, var(--bh-bg-warning-soft));
+}
+
+.ds-feed-item__files {
+  overflow: hidden;
+  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
+  border-radius: var(--slideout-radius-lg);
+  background: var(--slideout-bg-default);
+  box-shadow: var(--slideout-shadow-surface);
+}
+
+.ds-file-row {
+  display: flex;
+  align-items: center;
+  gap: var(--slideout-space-md);
+  min-height: var(--slideout-control-height-lg);
+  padding: var(--slideout-space-md) var(--slideout-space-lg);
+  color: var(--slideout-content-default);
+}
+
+.ds-file-row + .ds-file-row {
+  border-top: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
+}
+
+.ds-file-row svg {
+  flex: 0 0 auto;
+  color: var(--slideout-content-subtle);
+}
+
+.ds-file-row span {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-file-row button {
+  flex: 0 0 auto;
+  padding: 0;
+  color: var(--slideout-content-link);
+  background: transparent;
+}
+
+.ds-payment-detail,
+.ds-payment-form {
+  gap: var(--slideout-space-4xl);
+}
+
+.ds-payment-detail__hero,
+.ds-payment-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
+  border-radius: var(--slideout-radius-xl);
+}
+
+.ds-payment-detail__hero {
+  gap: var(--slideout-space-4xl);
+  padding: var(--slideout-space-4xl);
+  background: var(--slideout-bg-dim);
+}
+
+.ds-payment-detail__user {
+  display: flex;
+  align-items: center;
+  gap: var(--slideout-space-xl);
+  min-width: 0;
+}
+
+.ds-payment-detail__name {
+  color: var(--slideout-content-default);
+  font-size: var(--bh-text-heading-xs-medium-font-size);
+  font-weight: var(--bh-text-heading-xs-medium-font-weight);
+  line-height: var(--bh-text-heading-xs-medium-line-height);
+}
+
+.ds-payment-detail__muted,
+.ds-payment-detail__date,
+.ds-payment-form__date,
+.ds-payment-form__field span,
+.ds-payment-form__upload-copy span {
+  color: var(--slideout-content-subtle);
+}
+
+.ds-payment-detail__amount,
+.ds-payment-form__value {
+  color: var(--slideout-content-default);
+  font-size: var(--bh-text-heading-md-semibold-font-size);
+  font-weight: var(--bh-font-weight-bold);
+  line-height: var(--bh-text-heading-md-semibold-line-height);
+}
+
+.ds-payment-detail__date {
+  font-size: var(--bh-text-body-lg-regular-font-size);
+  line-height: var(--bh-text-body-lg-regular-line-height);
+}
+
+.ds-payment-card {
+  gap: var(--slideout-space-4xl);
+  padding: var(--slideout-space-4xl);
+  background: var(--slideout-bg-raised);
+}
+
+.ds-payment-detail__rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--slideout-space-3xl);
+}
+
+.ds-payment-detail__row,
+.ds-payment-detail__transaction {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--slideout-space-xl);
+  min-width: 0;
+}
+
+.ds-payment-detail__row span {
+  color: var(--slideout-content-subtle);
+}
+
+.ds-payment-detail__row strong,
+.ds-payment-detail__transaction span,
+.ds-payment-form__field strong {
+  color: var(--slideout-content-default);
+  font-weight: var(--bh-font-weight-medium);
+}
+
+.ds-payment-detail__transaction span {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.ds-payment-detail__copy {
+  min-height: var(--slideout-control-height-md);
+  padding-inline: var(--slideout-space-lg);
+}
+
+.ds-payment-detail__story {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: var(--slideout-control-height-md);
+  padding: var(--slideout-space-md);
+  border-radius: var(--slideout-radius-control);
+  color: var(--slideout-content-link);
+  background: transparent;
+  font-weight: var(--bh-font-weight-medium);
+}
+
+.ds-payment-form__amount {
+  display: flex;
+  align-items: center;
+  gap: var(--slideout-space-3xl);
+  width: 100%;
+  padding-bottom: var(--slideout-space-3xl);
+  border-bottom: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
+}
+
+.ds-payment-form__amount-copy {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: var(--slideout-space-xs);
+  min-width: 0;
+}
+
+.ds-payment-form__export {
+  flex: 0 0 auto;
+  min-height: var(--slideout-control-height-md);
+}
+
+.ds-company-icon {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--bh-space-8xl-48) + var(--slideout-space-md));
+  height: calc(var(--bh-space-8xl-48) + var(--slideout-space-md));
+  overflow: hidden;
+  border-radius: var(--slideout-radius-full);
+  background: linear-gradient(135deg, var(--bh-bg-accent-purple-default), var(--bh-bg-brand-default));
+}
+
+.ds-company-icon span,
+.ds-company-icon::before,
+.ds-company-icon::after {
+  position: absolute;
+  display: block;
+  width: calc(var(--bh-space-8xl-48) - var(--slideout-space-xxs));
+  height: var(--slideout-space-md);
+  border-radius: var(--slideout-radius-full);
+  background: var(--slideout-on-color);
+  content: "";
+}
+
+.ds-company-icon span {
+  transform: translateY(calc(-1 * (var(--slideout-space-xl) - var(--bh-space-xxxs-1)))) rotate(7deg);
+}
+
+.ds-company-icon::before {
+  transform: rotate(7deg);
+}
+
+.ds-company-icon::after {
+  transform: translateY(calc(var(--slideout-space-xl) - var(--bh-space-xxxs-1))) rotate(7deg);
+}
+
+.ds-payment-form__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--slideout-space-4xl) var(--slideout-space-xl);
+}
+
+.ds-payment-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--slideout-space-xs);
+  min-width: 0;
+}
+
+.ds-payment-form__field span {
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+}
+
+.ds-payment-form__field strong {
+  overflow-wrap: anywhere;
+}
+
+.ds-payment-form__section {
+  gap: var(--slideout-space-xl);
+}
+
+.ds-payment-form__select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--slideout-space-md);
+  width: 100%;
+  min-height: var(--slideout-control-height-lg);
+  padding: 0 var(--slideout-space-lg) 0 var(--slideout-space-xl);
+  border: var(--bh-space-xxxs-1) solid var(--slideout-border-input);
+  border-radius: var(--slideout-radius-lg);
+  color: var(--slideout-content-default);
+  background: var(--slideout-bg-default);
+  box-shadow: var(--shadow-input);
+}
+
+.ds-payment-form__select span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-payment-form__upload {
+  display: flex;
+  align-items: center;
+  gap: var(--slideout-space-xl);
+  width: 100%;
+  padding: var(--slideout-space-3xl);
+  border: var(--bh-space-xxxs-1) dashed var(--slideout-border-default);
+  border-radius: var(--slideout-radius-lg);
+  background: var(--slideout-bg-muted);
+}
+
+.ds-payment-form__upload-icon {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--slideout-control-height-lg);
+  height: var(--slideout-control-height-lg);
+  border: var(--bh-space-xxxs-1) solid var(--slideout-border-subtle);
+  border-radius: var(--slideout-radius-lg);
+  color: var(--slideout-content-default);
+  background: var(--slideout-bg-default);
+  box-shadow: var(--slideout-shadow-surface);
+}
+
+.ds-payment-form__upload-copy {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: var(--slideout-space-xxs);
+  min-width: 0;
+}
+
+.ds-payment-form__upload-copy strong {
+  color: var(--slideout-content-default);
+  font-weight: var(--bh-font-weight-medium);
+  overflow-wrap: anywhere;
+}
+
+.ds-payment-form__upload-copy span {
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+  overflow-wrap: anywhere;
+}
+
+.ds-slideout--rtl .ds-slideout-profile__identity,
+.ds-slideout--rtl .ds-feed-item__copy,
+.ds-slideout--rtl .ds-payment-form__amount-copy,
+.ds-slideout--rtl .ds-payment-form__field,
+.ds-slideout--rtl .ds-payment-form__upload-copy,
+.ds-slideout--rtl .ds-payment-card,
+.ds-slideout--rtl .ds-payment-detail__hero {
+  align-items: flex-end;
+  text-align: right;
+}
+
+.ds-slideout--rtl .ds-payment-detail__row {
+  flex-direction: row-reverse;
+}
+
+.ds-slideout--rtl .ds-payment-form__upload {
+  flex-direction: row-reverse;
+}
+
+.ds-slideout--rtl .ds-payment-form__select {
+  padding-right: var(--slideout-space-xl);
+  padding-left: var(--slideout-space-lg);
+}