:host {
  display: inline-block;
}

.btn {
  min-height: 40px;
  font-weight: 700;
  font-size: 15px;
  min-width: 216px;
}

.btn-primary,
.btn-secondary,
.btn-danger {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-outline-primary,
.btn-outline-danger {
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-primary {
  --bs-btn-bg: var(--tenant-primary);
  --bs-btn-border-color: var(--tenant-primary);
  --bs-btn-hover-bg: color-mix(in srgb, black 40%, var(--tenant-primary));
  --bs-btn-hover-border-color: color-mix(in srgb, black 40%, var(--tenant-primary));
  --bs-btn-active-bg: color-mix(in srgb, black 44%, var(--tenant-primary));
  --bs-btn-active-border-color: color-mix(in srgb, black 44%, var(--tenant-primary));
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: color-mix(in srgb, white 50%, var(--tenant-primary));
  --bs-btn-disabled-border-color: color-mix(in srgb, white 50%, var(--tenant-primary));
  --bs-btn-disabled-opacity: 1;
}

.btn-secondary {
  --bs-btn-bg: var(--tenant-secondary);
  --bs-btn-border-color: var(--tenant-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, black 26%, var(--tenant-secondary));
  --bs-btn-hover-border-color: color-mix(in srgb, black 26%, var(--tenant-secondary));
  --bs-btn-active-bg: color-mix(in srgb, black 30%, var(--tenant-secondary));
  --bs-btn-active-border-color: color-mix(in srgb, black 30%, var(--tenant-secondary));
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: color-mix(in srgb, transparent 50%, var(--tenant-secondary));
  --bs-btn-disabled-border-color: color-mix(in srgb, transparent 50%, var(--tenant-secondary));
  --bs-btn-disabled-opacity: 1;
}

.btn-danger {
  --bs-btn-bg: var(--tenant-danger);
  --bs-btn-border-color: var(--tenant-danger);
  --bs-btn-hover-bg: color-mix(in srgb, black 38%, var(--tenant-danger));
  --bs-btn-hover-border-color: color-mix(in srgb, black 38%, var(--tenant-danger));
  --bs-btn-active-bg: color-mix(in srgb, black 44%, var(--tenant-danger));
  --bs-btn-active-border-color: color-mix(in srgb, black 44%, var(--tenant-danger));
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: color-mix(in srgb, transparent 50%, var(--tenant-danger));
  --bs-btn-disabled-border-color: color-mix(in srgb, transparent 50%, var(--tenant-danger));
  --bs-btn-disabled-opacity: 1;
}

.btn-outline-primary {
  --bs-btn-color: var(--tenant-primary);
  --bs-btn-border-color: var(--tenant-primary);
  --bs-btn-hover-bg: var(--tenant-primary);
  --bs-btn-hover-border-color: var(--tenant-primary);
  --bs-btn-active-bg: color-mix(in srgb, black 12%, var(--tenant-primary));
  --bs-btn-active-border-color: color-mix(in srgb, black 12%, var(--tenant-primary));
  --bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
  --bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
}

.btn-outline-danger {
  --bs-btn-color: var(--tenant-danger);
  --bs-btn-border-color: var(--tenant-danger);
  --bs-btn-hover-bg: var(--tenant-danger);
  --bs-btn-hover-border-color: var(--tenant-danger);
  --bs-btn-active-bg: color-mix(in srgb, black 12%, var(--tenant-danger));
  --bs-btn-active-border-color: color-mix(in srgb, black 12%, var(--tenant-danger));
  --bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
  --bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
}