:host {
  /** @prop --background-color: The background color of the button. */
  --background-color: transparent;
  /** @prop --color: The text color of the button. */
  --color: #333;
  /** --border-size: The border size of the button. */
  --border-size: 1px;
  /** --border-color: The border color of the button. */
  --border-color: var(--backround-color);
  /** --border-radius: The border radius of the button. */
  --border-radius: var(--dnn-controls-radius, 5px);
  /** --padding: The padding of the button. */
  --padding: var(--dnn-controls-padding, 5px);
  display: inline-block;
  width: auto;
}

:host(.primary) {
  --background-color: var(--dnn-color-primary, #3792ED);
  --color: var(--dnn-color-primary-contrast, white);
  --focus-color: var(--background-color);
}

:host(.primary.reversed) {
  --background-color: var(--dnn-color-primary-contrast, white);
  --color: var(--dnn-color-primary, #3792ED);
  --border-color: var(--dnn-color-primary, #3792ED);
  --focus-color: var(--color);
}

:host(.secondary) {
  --background-color: var(--dnn-color-secondary, #CCC);
  --color: var(--dnn-color-secondary-contrast, #222);
  --focus-color: var(--background-color);
}

:host(.secondary.reversed) {
  --background-color: var(--dnn-color-secondary-contrast, #222);
  --color: var(--dnn-color-secondary, #CCC);
  --border-color: var(--dnn-color-secondary, #CCC);
  --focus-color: var(--color);
}

:host(.danger) {
  --background-color: var(--dnn-color-danger, #dc3545);
  --color: var(--dnn-color-danger-contrast,white);
  --focus-color: var(--background-color);
}

:host(.danger.reversed) {
  --background-color: var(--dnn-color-danger-contrast, white);
  --color: var(--dnn-color-danger, #dc3545);
  --border-color: var(--dnn-color-danger, #dc3545);
  --focus-color: var(--color);
}

:host(.tertiary) {
  --background-color: var(--dnn-color-tertiary, #EAEAEA);
  --color: var(--dnn-color-tertiary-contrast, black);
  --focus-color: var(--background-color);
}

:host(.tertiary.reversed) {
  --background-color: var(--dnn-color-tertiary-contrast, #333);
  --color: var(--dnn-color-tertiary, #EAEAEA);
  --border-color: var(--dnn-color-tertiary, #EAEAEA);
  --focus-color: var(--color);
}

:host(.hydrated) button {
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--padding) calc(var(--padding) * 2);
  background-color: transparent;
  background-color: var(--background-color);
  color: var(--color);
  outline: none;
}
:host(.hydrated) button:focus-visible, :host(.hydrated) button:hover {
  box-shadow: 0 0 2px 2px var(--focus-color);
}

:host(.disabled) {
  position: relative;
  filter: saturate(0.5) opacity(0.7);
  pointer-events: all !important;
  box-shadow: none;
}
:host(.disabled)::after {
  cursor: not-allowed;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

:host(.small) button {
  padding: calc(var(--padding) / 2) var(--padding);
  font-size: 0.7em;
}

:host(.large) button {
  padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);
  font-size: 1.2em;
}

button {
  height: 100%;
  width: 100%;
  cursor: pointer;
}