$default-variables: (
  "Attribute____padding": .375em .75em,
  "Attribute____font-size": var(--font-size--xs),
  "Attribute____font-weight": var(--font-weight--semibold),
  "Attribute____line-height": var(--line-height--solid),

  "Attribute____border-color": rgba(var(--color--main-rgb), .3),
  "Attribute____border-radius": var(--radius--med),
  "Attribute____border-width": 1px,

  "Attribute____color": rgba(var(--color--main-rgb), .6275),

  "Attribute--hover____color": rgba(var(--color--main-rgb), .875),
  "Attribute--hover____border-color": rgba(var(--color--main-rgb), .5),

  "Attribute--selected____color": var(--color--dscout),
  "Attribute--selected____background-color": none,
  "Attribute--selected____border-color": rgba(var(--color--dscout-rgb), .5)
);

@mixin generate-attribute-selector-theme-variables($theme-variables: ()) {
  $variables: map-merge($default-variables, $theme-variables);

  @each $name, $value in $variables {
    --#{$name}: #{$value};
  }
}