orange-opensource/orange-boosted-bootstrap/component-patterns

#{$ouds-root-selector} {
  --#{$prefix}my-comp-border-radius: #{$ouds-border-radius-default};
}
 
.my-component {
  // scss-docs-start my-component-css-vars
  --#{$prefix}my-comp-padding: #{$ouds-my-comp-space-padding-block};
  --#{$prefix}my-comp-color: #{$ouds-color-content-default};
  --#{$prefix}my-comp-bg: #{$ouds-color-bg-primary};
  // scss-docs-end my-component-css-vars
 
  padding: var(--#{$prefix}my-comp-padding);
  color: var(--#{$prefix}my-comp-color);
  background-color: var(--#{$prefix}my-comp-bg);
  @include border-radius(var(--#{$prefix}my-comp-border-radius));
  @include transition($transition-base);
 
  &:hover {
    --#{$prefix}my-comp-bg: #{$ouds-color-bg-secondary};  // Override var, not property
  }
 
  &:focus-visible {
    @include focus-visible();
  }
 
  &:disabled, &[aria-disabled="true"] {
    --#{$prefix}my-comp-color: #{$ouds-color-content-disabled};
    pointer-events: none;
  }
}
 
.my-component-variant {
  --#{$prefix}my-comp-bg: #{$ouds-color-surface-brand};
}

// scss-docs-start badge-css-vars
// scss-docs-end badge-css-vars

padding: calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width))
         calc(var(--#{$prefix}btn-padding-x) - var(--#{$prefix}btn-border-width));

&::before {
  content: "";
  background-color: currentcolor;
  mask-image: escape-svg(var(--#{$prefix}icon));
  mask-size: 100%;
  mask-repeat: no-repeat;
}

.component {
  --#{$prefix}comp-width: #{$mobile};
  @include media-breakpoint-up(xl) {
    --#{$prefix}comp-width: #{$desktop};
  }
}

display: flex; // OUDS mod: instead of `inline-block`
// OUDS mod: loading buttons
.btn.loading-indeterminate { ... }
// End mod