component ComponentBaseStyles {
  view {
  }

  style {
    .wire-component {
      --wire-component-color: var(--wire-color-primary);
      --wire-component-scale: 1;
      margin: 0;
      color: var(--wire-color-text);
      font-family: var(--wrn-font-sans, inherit);
    }

    .wire-component--color-primary {
      --wire-component-color: var(--wire-color-primary);
    }

    .wire-component--color-secondary {
      --wire-component-color: var(--wire-color-secondary);
    }

    .wire-component--color-success {
      --wire-component-color: var(--wire-color-success);
    }

    .wire-component--color-warning {
      --wire-component-color: var(--wire-color-warning);
    }

    .wire-component--color-danger {
      --wire-component-color: var(--wire-color-danger);
    }

    .wire-component--color-info {
      --wire-component-color: var(--wire-color-info);
    }

    .wire-component--size-xs {
      --wire-component-scale: 0.78;
    }

    .wire-component--size-sm {
      --wire-component-scale: 0.88;
    }

    .wire-component--size-default,
    .wire-component--size-md {
      --wire-component-scale: 1;
    }

    .wire-component--size-lg {
      --wire-component-scale: 1.14;
    }

    .wire-component--size-xl {
      --wire-component-scale: 1.28;
    }

    .wire-component:not(.wire-btn) {
      font-size: calc(1em * var(--wire-component-scale));
    }

    .wire-component :is(a, button, input, select, textarea):focus-visible {
      outline-color: var(--wire-component-color);
    }

    .wire-component p {
      margin: 0;
      color: var(--wire-color-muted);
      line-height: 1.6;
    }
  }
}