.btn-group {
  display: inline-flex;
  width: 100%;
}
.btn-group button,
.btn-group .btn {
  border-radius: 0;
}
.btn-group button[class*=outline-]:not(:first-child),
.btn-group .btn[class*=outline-]:not(:first-child) {
  border-left: none;
}
.btn-group button:first-child,
.btn-group .btn:first-child {
  border-top-left-radius: var(--button-border-radius);
  border-bottom-left-radius: var(--button-border-radius);
}
.btn-group button:last-child,
.btn-group .btn:last-child {
  border-top-right-radius: var(--button-border-radius);
  border-bottom-right-radius: var(--button-border-radius);
}

.btn {
  padding-inline: var(--button-padding-x);
  padding-block: var(--button-padding-y);
  border-radius: var(--button-border-radius);
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  background-color: var(--button-background-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  text-wrap: nowrap;
  line-height: normal;
}

.btn-sm {
  padding-inline: var(--button-padding-x-sm);
  padding-block: var(--button-padding-y-sm);
}

.btn-md {
  padding-inline: var(--button-padding-x-md);
  padding-block: var(--button-padding-y-md);
}

.btn-lg {
  padding-inline: var(--button-padding-x-lg);
  padding-block: var(--button-padding-y-lg);
}

.close-indicator::after {
  content: var(--button-close-content);
}

.btn:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--button-hover-background-color);
}
.btn:not(:disabled):active, .btn:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--button-active-background-color);
}
.btn:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--button-border-color);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--button-border-color) 50%, transparent);
}
.btn:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-primary {
  border-color: var(--color-transparent);
  background-color: var(--color-primary);
  color: var(--content-on-primary);
}
.btn-primary:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-primary);
}
.btn-primary:not(:disabled):active, .btn-primary:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-primary);
}
.btn-primary:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.btn-primary:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-secondary {
  border-color: var(--color-transparent);
  background-color: var(--color-secondary);
  color: var(--content-on-secondary);
}
.btn-secondary:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-secondary);
}
.btn-secondary:not(:disabled):active, .btn-secondary:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-secondary);
}
.btn-secondary:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-secondary) 50%, transparent);
}
.btn-secondary:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-tertiary {
  border-color: var(--color-transparent);
  background-color: var(--color-tertiary);
  color: var(--content-on-tertiary);
}
.btn-tertiary:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-tertiary);
}
.btn-tertiary:not(:disabled):active, .btn-tertiary:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-tertiary);
}
.btn-tertiary:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-tertiary);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-tertiary) 50%, transparent);
}
.btn-tertiary:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-success {
  border-color: var(--color-transparent);
  background-color: var(--color-success);
  color: var(--content-on-success);
}
.btn-success:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-success);
}
.btn-success:not(:disabled):active, .btn-success:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-success);
}
.btn-success:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-success);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-success) 50%, transparent);
}
.btn-success:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-info {
  border-color: var(--color-transparent);
  background-color: var(--color-info);
  color: var(--content-on-info);
}
.btn-info:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-info);
}
.btn-info:not(:disabled):active, .btn-info:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-info);
}
.btn-info:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-info) 50%, transparent);
}
.btn-info:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-warning {
  border-color: var(--color-transparent);
  background-color: var(--color-warning);
  color: var(--content-on-warning);
}
.btn-warning:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-warning);
}
.btn-warning:not(:disabled):active, .btn-warning:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-warning);
}
.btn-warning:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-warning);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-warning) 50%, transparent);
}
.btn-warning:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-danger {
  border-color: var(--color-transparent);
  background-color: var(--color-danger);
  color: var(--content-on-danger);
}
.btn-danger:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-danger);
}
.btn-danger:not(:disabled):active, .btn-danger:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-danger);
}
.btn-danger:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-danger);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-danger) 50%, transparent);
}
.btn-danger:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-neutral {
  border-color: var(--color-transparent);
  background-color: var(--color-neutral);
  color: var(--content-on-neutral);
}
.btn-neutral:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-neutral);
}
.btn-neutral:not(:disabled):active, .btn-neutral:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-neutral);
}
.btn-neutral:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-neutral);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-neutral) 50%, transparent);
}
.btn-neutral:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-light {
  border-color: var(--color-transparent);
  background-color: var(--color-light);
  color: var(--content-on-light);
}
.btn-light:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-light);
}
.btn-light:not(:disabled):active, .btn-light:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-light);
}
.btn-light:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-light);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-light) 50%, transparent);
}
.btn-light:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-dark {
  border-color: var(--color-transparent);
  background-color: var(--color-dark);
  color: var(--content-on-dark);
}
.btn-dark:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-dark);
}
.btn-dark:not(:disabled):active, .btn-dark:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-dark);
}
.btn-dark:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-dark);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-dark) 50%, transparent);
}
.btn-dark:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-white {
  border-color: var(--color-transparent);
  background-color: var(--color-white);
  color: var(--content-on-white);
}
.btn-white:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-white);
}
.btn-white:not(:disabled):active, .btn-white:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-white);
}
.btn-white:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-white);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-white) 50%, transparent);
}
.btn-white:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-black {
  border-color: var(--color-transparent);
  background-color: var(--color-black);
  color: var(--content-on-black);
}
.btn-black:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-black);
}
.btn-black:not(:disabled):active, .btn-black:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-black);
}
.btn-black:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-black);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-black) 50%, transparent);
}
.btn-black:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-primary-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-primary-ghost);
  color: var(--content-on-primary-ghost);
}
.btn-primary-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-primary-ghost);
}
.btn-primary-ghost:not(:disabled):active, .btn-primary-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-primary-ghost);
}
.btn-primary-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-primary-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-primary-ghost) 50%, transparent);
}
.btn-primary-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-secondary-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-secondary-ghost);
  color: var(--content-on-secondary-ghost);
}
.btn-secondary-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-secondary-ghost);
}
.btn-secondary-ghost:not(:disabled):active, .btn-secondary-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-secondary-ghost);
}
.btn-secondary-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-secondary-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-secondary-ghost) 50%, transparent);
}
.btn-secondary-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-tertiary-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-tertiary-ghost);
  color: var(--content-on-tertiary-ghost);
}
.btn-tertiary-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-tertiary-ghost);
}
.btn-tertiary-ghost:not(:disabled):active, .btn-tertiary-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-tertiary-ghost);
}
.btn-tertiary-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-tertiary-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-tertiary-ghost) 50%, transparent);
}
.btn-tertiary-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-success-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-success-ghost);
  color: var(--content-on-success-ghost);
}
.btn-success-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-success-ghost);
}
.btn-success-ghost:not(:disabled):active, .btn-success-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-success-ghost);
}
.btn-success-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-success-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-success-ghost) 50%, transparent);
}
.btn-success-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-info-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-info-ghost);
  color: var(--content-on-info-ghost);
}
.btn-info-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-info-ghost);
}
.btn-info-ghost:not(:disabled):active, .btn-info-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-info-ghost);
}
.btn-info-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-info-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-info-ghost) 50%, transparent);
}
.btn-info-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-warning-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-warning-ghost);
  color: var(--content-on-warning-ghost);
}
.btn-warning-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-warning-ghost);
}
.btn-warning-ghost:not(:disabled):active, .btn-warning-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-warning-ghost);
}
.btn-warning-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-warning-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-warning-ghost) 50%, transparent);
}
.btn-warning-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-danger-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-danger-ghost);
  color: var(--content-on-danger-ghost);
}
.btn-danger-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-danger-ghost);
}
.btn-danger-ghost:not(:disabled):active, .btn-danger-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-danger-ghost);
}
.btn-danger-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-danger-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-danger-ghost) 50%, transparent);
}
.btn-danger-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-neutral-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-neutral-ghost);
  color: var(--content-on-neutral-ghost);
}
.btn-neutral-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-neutral-ghost);
}
.btn-neutral-ghost:not(:disabled):active, .btn-neutral-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-neutral-ghost);
}
.btn-neutral-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-neutral-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-neutral-ghost) 50%, transparent);
}
.btn-neutral-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-light-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-light-ghost);
  color: var(--content-on-light-ghost);
}
.btn-light-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-light-ghost);
}
.btn-light-ghost:not(:disabled):active, .btn-light-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-light-ghost);
}
.btn-light-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-light-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-light-ghost) 50%, transparent);
}
.btn-light-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-dark-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-dark-ghost);
  color: var(--content-on-dark-ghost);
}
.btn-dark-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-dark-ghost);
}
.btn-dark-ghost:not(:disabled):active, .btn-dark-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-dark-ghost);
}
.btn-dark-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-dark-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-dark-ghost) 50%, transparent);
}
.btn-dark-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-white-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-white-ghost);
  color: var(--content-on-white-ghost);
}
.btn-white-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-white-ghost);
}
.btn-white-ghost:not(:disabled):active, .btn-white-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-white-ghost);
}
.btn-white-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-white-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-white-ghost) 50%, transparent);
}
.btn-white-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-black-ghost {
  border-color: var(--color-transparent);
  background-color: var(--color-black-ghost);
  color: var(--content-on-black-ghost);
}
.btn-black-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--hover-black-ghost);
}
.btn-black-ghost:not(:disabled):active, .btn-black-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-black-ghost);
}
.btn-black-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-black-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-black-ghost) 50%, transparent);
}
.btn-black-ghost:disabled {
  background-color: var(--button-disabled-background-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-color);
  opacity: 0.5;
}

.btn-outline {
  background-color: var(--button-outline-background-color);
}
.btn-outline:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--button-hover-background-color);
}
.btn-outline:not(:disabled):active, .btn-outline:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--button-active-background-color);
}
.btn-outline:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--button-border-color);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--button-border-color) 50%, transparent);
}
.btn-outline:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-primary {
  background-color: var(--button-outline-background-color);
  color: var(--color-primary);
  border-color: var(--color-primary);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-primary:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-primary);
  color: var(--content-on-primary);
}
.btn-outline-primary:not(:disabled):active, .btn-outline-primary:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-primary);
  color: var(--content-on-primary);
}
.btn-outline-primary:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.btn-outline-primary:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-secondary {
  background-color: var(--button-outline-background-color);
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-secondary:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-secondary);
  color: var(--content-on-secondary);
}
.btn-outline-secondary:not(:disabled):active, .btn-outline-secondary:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-secondary);
  color: var(--content-on-secondary);
}
.btn-outline-secondary:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-secondary) 50%, transparent);
}
.btn-outline-secondary:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-tertiary {
  background-color: var(--button-outline-background-color);
  color: var(--color-tertiary);
  border-color: var(--color-tertiary);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-tertiary:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-tertiary);
  color: var(--content-on-tertiary);
}
.btn-outline-tertiary:not(:disabled):active, .btn-outline-tertiary:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-tertiary);
  color: var(--content-on-tertiary);
}
.btn-outline-tertiary:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-tertiary);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-tertiary) 50%, transparent);
}
.btn-outline-tertiary:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-success {
  background-color: var(--button-outline-background-color);
  color: var(--color-success);
  border-color: var(--color-success);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-success:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-success);
  color: var(--content-on-success);
}
.btn-outline-success:not(:disabled):active, .btn-outline-success:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-success);
  color: var(--content-on-success);
}
.btn-outline-success:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-success);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-success) 50%, transparent);
}
.btn-outline-success:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-info {
  background-color: var(--button-outline-background-color);
  color: var(--color-info);
  border-color: var(--color-info);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-info:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-info);
  color: var(--content-on-info);
}
.btn-outline-info:not(:disabled):active, .btn-outline-info:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-info);
  color: var(--content-on-info);
}
.btn-outline-info:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-info) 50%, transparent);
}
.btn-outline-info:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-warning {
  background-color: var(--button-outline-background-color);
  color: var(--color-warning);
  border-color: var(--color-warning);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-warning:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-warning);
  color: var(--content-on-warning);
}
.btn-outline-warning:not(:disabled):active, .btn-outline-warning:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-warning);
  color: var(--content-on-warning);
}
.btn-outline-warning:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-warning);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-warning) 50%, transparent);
}
.btn-outline-warning:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-danger {
  background-color: var(--button-outline-background-color);
  color: var(--color-danger);
  border-color: var(--color-danger);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-danger:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-danger);
  color: var(--content-on-danger);
}
.btn-outline-danger:not(:disabled):active, .btn-outline-danger:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-danger);
  color: var(--content-on-danger);
}
.btn-outline-danger:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-danger);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-danger) 50%, transparent);
}
.btn-outline-danger:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-neutral {
  background-color: var(--button-outline-background-color);
  color: var(--color-neutral);
  border-color: var(--color-neutral);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-neutral:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-neutral);
  color: var(--content-on-neutral);
}
.btn-outline-neutral:not(:disabled):active, .btn-outline-neutral:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-neutral);
  color: var(--content-on-neutral);
}
.btn-outline-neutral:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-neutral);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-neutral) 50%, transparent);
}
.btn-outline-neutral:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-light {
  background-color: var(--button-outline-background-color);
  color: var(--color-light);
  border-color: var(--color-light);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-light:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-light);
  color: var(--content-on-light);
}
.btn-outline-light:not(:disabled):active, .btn-outline-light:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-light);
  color: var(--content-on-light);
}
.btn-outline-light:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-light);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-light) 50%, transparent);
}
.btn-outline-light:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-dark {
  background-color: var(--button-outline-background-color);
  color: var(--color-dark);
  border-color: var(--color-dark);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-dark:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-dark);
  color: var(--content-on-dark);
}
.btn-outline-dark:not(:disabled):active, .btn-outline-dark:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-dark);
  color: var(--content-on-dark);
}
.btn-outline-dark:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-dark);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-dark) 50%, transparent);
}
.btn-outline-dark:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-white {
  background-color: var(--button-outline-background-color);
  color: var(--color-white);
  border-color: var(--color-white);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-white:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-white);
  color: var(--content-on-white);
}
.btn-outline-white:not(:disabled):active, .btn-outline-white:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-white);
  color: var(--content-on-white);
}
.btn-outline-white:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-white);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-white) 50%, transparent);
}
.btn-outline-white:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-black {
  background-color: var(--button-outline-background-color);
  color: var(--color-black);
  border-color: var(--color-black);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-black:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-black);
  color: var(--content-on-black);
}
.btn-outline-black:not(:disabled):active, .btn-outline-black:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-black);
  color: var(--content-on-black);
}
.btn-outline-black:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-black);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-black) 50%, transparent);
}
.btn-outline-black:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-primary-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-primary-ghost);
  border-color: var(--color-primary-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-primary-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-primary-ghost);
  color: var(--content-on-primary-ghost);
}
.btn-outline-primary-ghost:not(:disabled):active, .btn-outline-primary-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-primary-ghost);
  color: var(--content-on-primary-ghost);
}
.btn-outline-primary-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-primary-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-primary-ghost) 50%, transparent);
}
.btn-outline-primary-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-secondary-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-secondary-ghost);
  border-color: var(--color-secondary-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-secondary-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-secondary-ghost);
  color: var(--content-on-secondary-ghost);
}
.btn-outline-secondary-ghost:not(:disabled):active, .btn-outline-secondary-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-secondary-ghost);
  color: var(--content-on-secondary-ghost);
}
.btn-outline-secondary-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-secondary-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-secondary-ghost) 50%, transparent);
}
.btn-outline-secondary-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-tertiary-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-tertiary-ghost);
  border-color: var(--color-tertiary-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-tertiary-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-tertiary-ghost);
  color: var(--content-on-tertiary-ghost);
}
.btn-outline-tertiary-ghost:not(:disabled):active, .btn-outline-tertiary-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-tertiary-ghost);
  color: var(--content-on-tertiary-ghost);
}
.btn-outline-tertiary-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-tertiary-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-tertiary-ghost) 50%, transparent);
}
.btn-outline-tertiary-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-success-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-success-ghost);
  border-color: var(--color-success-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-success-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-success-ghost);
  color: var(--content-on-success-ghost);
}
.btn-outline-success-ghost:not(:disabled):active, .btn-outline-success-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-success-ghost);
  color: var(--content-on-success-ghost);
}
.btn-outline-success-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-success-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-success-ghost) 50%, transparent);
}
.btn-outline-success-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-info-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-info-ghost);
  border-color: var(--color-info-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-info-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-info-ghost);
  color: var(--content-on-info-ghost);
}
.btn-outline-info-ghost:not(:disabled):active, .btn-outline-info-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-info-ghost);
  color: var(--content-on-info-ghost);
}
.btn-outline-info-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-info-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-info-ghost) 50%, transparent);
}
.btn-outline-info-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-warning-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-warning-ghost);
  border-color: var(--color-warning-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-warning-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-warning-ghost);
  color: var(--content-on-warning-ghost);
}
.btn-outline-warning-ghost:not(:disabled):active, .btn-outline-warning-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-warning-ghost);
  color: var(--content-on-warning-ghost);
}
.btn-outline-warning-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-warning-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-warning-ghost) 50%, transparent);
}
.btn-outline-warning-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-danger-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-danger-ghost);
  border-color: var(--color-danger-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-danger-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-danger-ghost);
  color: var(--content-on-danger-ghost);
}
.btn-outline-danger-ghost:not(:disabled):active, .btn-outline-danger-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-danger-ghost);
  color: var(--content-on-danger-ghost);
}
.btn-outline-danger-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-danger-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-danger-ghost) 50%, transparent);
}
.btn-outline-danger-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-neutral-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-neutral-ghost);
  border-color: var(--color-neutral-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-neutral-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-neutral-ghost);
  color: var(--content-on-neutral-ghost);
}
.btn-outline-neutral-ghost:not(:disabled):active, .btn-outline-neutral-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-neutral-ghost);
  color: var(--content-on-neutral-ghost);
}
.btn-outline-neutral-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-neutral-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-neutral-ghost) 50%, transparent);
}
.btn-outline-neutral-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-light-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-light-ghost);
  border-color: var(--color-light-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-light-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-light-ghost);
  color: var(--content-on-light-ghost);
}
.btn-outline-light-ghost:not(:disabled):active, .btn-outline-light-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-light-ghost);
  color: var(--content-on-light-ghost);
}
.btn-outline-light-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-light-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-light-ghost) 50%, transparent);
}
.btn-outline-light-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-dark-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-dark-ghost);
  border-color: var(--color-dark-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-dark-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-dark-ghost);
  color: var(--content-on-dark-ghost);
}
.btn-outline-dark-ghost:not(:disabled):active, .btn-outline-dark-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-dark-ghost);
  color: var(--content-on-dark-ghost);
}
.btn-outline-dark-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-dark-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-dark-ghost) 50%, transparent);
}
.btn-outline-dark-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-white-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-white-ghost);
  border-color: var(--color-white-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-white-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-white-ghost);
  color: var(--content-on-white-ghost);
}
.btn-outline-white-ghost:not(:disabled):active, .btn-outline-white-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-white-ghost);
  color: var(--content-on-white-ghost);
}
.btn-outline-white-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-white-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-white-ghost) 50%, transparent);
}
.btn-outline-white-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}

.btn-outline-black-ghost {
  background-color: var(--button-outline-background-color);
  color: var(--color-black-ghost);
  border-color: var(--color-black-ghost);
  border-style: var(--border-style-outline);
  border-width: var(--border-width-outline);
}
.btn-outline-black-ghost:not(:disabled):hover {
  border-color: var(--color-transparent);
  background-color: var(--color-black-ghost);
  color: var(--content-on-black-ghost);
}
.btn-outline-black-ghost:not(:disabled):active, .btn-outline-black-ghost:not(:disabled).active {
  border-color: var(--color-transparent);
  background-color: var(--active-black-ghost);
  color: var(--content-on-black-ghost);
}
.btn-outline-black-ghost:not(:disabled):focus-visible {
  outline: none;
  border-color: var(--color-black-ghost);
  box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--color-black-ghost) 50%, transparent);
}
.btn-outline-black-ghost:disabled {
  background-color: var(--button-outline-disabled-background-color);
  border-color: var(--button-outline-disabled-border-color);
  color: var(--button-outline-disabled-color);
  opacity: 0.5;
}