/**
 *
 * Rules
 *
 */
:host {
  display: flex;
}
:host(.primary) {
  --ezp-textButton-background-disabled: var(--ezp-core-shade-primary);
  --ezp-textButton-background-init: var(--ezp-theme-solid);
  --ezp-textButton-color-disabled: var(--ezp-core-foreground-tertiary);
  --ezp-textButton-color-init: var(--ezp-white-100);
  --ezp-textButton-opacity-active: 0.74;
  --ezp-textButton-opacity-hover: 0.84;
}

:host(.secondary) {
  --ezp-textButton-background-active: var(--ezp-core-shade-tertiary);
  --ezp-textButton-background-disabled: var(--ezp-core-shade-primary);
  --ezp-textButton-background-hover: var(--ezp-core-shade-secondary);
  --ezp-textButton-background-init: var(--ezp-core-shade-primary);
  --ezp-textButton-color-disabled: var(--ezp-core-foreground-tertiary);
  --ezp-textButton-color-init: var(--ezp-theme-solid);
}

:host(.tertiary) {
  --ezp-textButton-background-active: var(--ezp-core-shade-secondary);
  --ezp-textButton-background-disabled: transparent;
  --ezp-textButton-background-hover: var(--ezp-core-shade-primary);
  --ezp-textButton-background-init: transparent;
  --ezp-textButton-color-disabled: var(--ezp-core-foreground-tertiary);
  --ezp-textButton-color-init: var(--ezp-theme-solid);
}

#button {
  align-items: center;
  appearance: none;
  background: var(--ezp-textButton-background, var(--ezp-textButton-background-init));
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  color: var(--ezp-textButton-color, var(--ezp-textButton-color-init));
  cursor: var(--ezp-textButton-cursor, pointer);
  display: flex;
  font-family: inherit;
  justify-content: center;
  margin: 0;
  opacity: var(--ezp-textButton-opacity, 1);
  outline: none;
  padding: var(--ezp-spacing-3);
  white-space: nowrap;
  width: 100%;
}
@media (hover: hover) {
  #button:not(:disabled):hover {
    --ezp-textButton-background: var(
      --ezp-textButton-background-hover,
      var(--ezp-textButton-background-init)
    );
    --ezp-textButton-opacity: var(--ezp-textButton-opacity-hover, 1);
  }
  #button:not(:disabled):active {
    --ezp-textButton-background: var(
      --ezp-textButton-background-active,
      var(--ezp-textButton-background-init)
    );
    --ezp-textButton-opacity: var(--ezp-textButton-opacity-active, 1);
  }
}
#button:disabled {
  --ezp-textButton-background: var(--ezp-textButton-background-disabled);
  --ezp-textButton-color: var(--ezp-textButton-color-disabled);
  --ezp-textButton-cursor: default;
}

#label {
  pointer-events: none;
}