:host {
  --primary-color: var(--design-primary-color, var(--panel-primary-color));
  --button-primary-text-color: var(
    --design-primary-text-color,
    var(--panel-on-primary-color)
  );
  --background-text-color: var(
    --design-background-text-color,
    var(--panel-on-background-color)
  );
  --surface-color: var(--design-surface-color, var(--panel-surface-color));
  --surface-text-color: var(
    --design-surface-text-color,
    var(--panel-on-surface-color)
  );
}

.bk-btn-group > .bk-btn {
  line-height: var(--line-height);
}

.bk-btn:active {
  transform: scale(0.98);
}

:host(.outline) .bk-btn {
  background-color: transparent;
}

:host(.solid) .bk-btn {
  border: 1.2px solid rgba(0, 0, 0, 0);
}

:host(.solid) .bk-btn.bk-btn-default {
  background-color: var(--surface-color);
  color: var(--surface-text-color);
}

:host(.outline) .bk-btn.bk-btn-default {
  border: 1px solid var(--surface-color);
  color: var(--background-text-color);
}

:host(.solid) .bk-btn-group .bk-btn.bk-btn-default.bk-active {
  box-shadow: inset 0px 3px 5px rgb(0 0 0 / 50%);
}

:host(.outline) .bk-btn.bk-btn-default.bk-active {
  box-shadow: inset 0px 3px 5px rgb(0 0 0 / 50%);
  color: var(--background-text-color);
}

:host(.outline) .bk-btn-group .bk-btn-default.bk-active {
  background-color: var(--surface-color);
  color: var(--surface-text-color);
}

:host(.solid) .bk-btn.bk-btn-primary {
  background-color: var(--primary-color);
}

:host(.solid) .bk-btn.bk-btn-primary.bk-active {
  background-color: var(--primary-color);
  box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%);
}

:host(.outline) .bk-btn-primary {
  background-color: transparent;
  color: var(--background-text-color);
}

:host(.outline) .bk-btn-primary.bk-active,
:host(.outline) .bk-btn-primary:hover {
  color: var(--background-text-color);
}

:host(.outline) .bk-btn-group .bk-btn-primary.bk-active {
  background-color: var(--primary-color);
  color: var(--button-primary-text-color);
}

:host(.outline) .bk-btn-success {
  color: var(--success-bg-color);
}

:host(.outline) .bk-btn-success.bk-active,
:host(.outline) .bk-btn-success:hover {
  color: var(--background-text-color);
}

:host(.outline) .bk-btn-group .bk-btn-success.bk-active {
  background-color: var(--success-bg-color);
  color: var(--background-text-color);
}

:host(.outline) .bk-btn-warning {
  color: var(--warning-bg-color);
}

:host(.outline) .bk-btn-warning.bk-active,
:host(.outline) .bk-btn-warning:hover {
  color: var(--background-text-color);
}

:host(.outline) .bk-btn-group .bk-btn-warning.bk-active {
  background-color: var(--warning-bg-color);
  color: var(--background-text-color);
}

:host(.outline) .bk-btn-danger {
  color: var(--danger-bg-color);
}

:host(.outline) .bk-btn-danger.bk-active,
:host(.outline) .bk-btn-danger:hover {
  color: var(--background-text-color);
}

:host(.outline) .bk-btn-group .bk-btn-danger.bk-active {
  background-color: var(--danger-bg-color);
  color: var(--background-text-color);
}

:host(.outline) .bk-btn-light {
  border-color: var(--light-bg-color);
  color: var(--background-text-color);
}

:host(.outline) .bk-btn-light.bk-active,
:host(.outline) .bk-btn-light:hover {
  background-color: var(--light-bg-color);
  color: black;
}

:host(.outline) .bk-btn-group .bk-btn-light.bk-active {
  background-color: var(--light-bg-color);
  color: black;
}

.bk-btn a {
  align-items: center;
  display: inline;
  flex-grow: 1;
  height: 100%;
  justify-content: center;
  padding: 6px;
}

:host(.bk-panel-models-widgets-FileDownload) .bk-btn {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0px;
}