@layer components {
  .empty-state {
    padding: var(--space-m);
    border: var(--border-size, 1.5px) dashed
      var(--border-color, var(--color-gray));
    text-align: center;
    border-radius: var(--border-radius);

    p {
      margin-top: 0;
      font-size: var(--font-small-responsive);
    }
  }

  .empty-state--small {
    padding: var(--space-xs);
  }

  .empty-state--left {
    text-align: left;
  }

  .empty-state__text {
    font-size: var(--font-size-l);
    color: var(--color-gray-dark);
    margin-bottom: var(--space-l);
    font-weight: bold;
  }

  .empty-state__text--small {
    font-size: var(--font-x-small-responsive);
    margin-bottom: 0;
    font-weight: normal;
  }

  .empty-state--only-child {
    display: none;
  }

  .empty-state--only-child:only-child {
    display: revert;
  }
}