@layer kz-components {
  .container {
    --empty-state-border-width: var(--border-width-1);
    --empty-state-illustration-max-height: 366px;
    --empty-state-illustration-max-width: 420px;
    --empty-state-text-container-max-width: 426px;

    container-type: inline-size;
    width: 100%;
    border: var(--empty-state-border-width) solid var(--empty-state-border-color);
    border-radius: var(--border-solid-border-radius);
    background-color: var(--empty-state-background-color);
    color: var(--color-purple-800);
  }

  .straightCorners {
    border-radius: 0;
  }

  .success {
    --empty-state-border-color: var(--color-green-500);
    --empty-state-background-color: var(--color-green-100);
  }

  .warning {
    --empty-state-border-color: var(--color-red-500);
    --empty-state-background-color: var(--color-red-100);
  }

  .informative {
    --empty-state-border-color: var(--color-blue-400);
    --empty-state-background-color: var(--color-blue-100);
  }

  .expert-advice {
    --empty-state-border-color: var(--color-purple-400);
    --empty-state-background-color: var(--color-purple-100);
  }

  .content {
    justify-content: center;
    display: grid;
    grid-template-columns: minmax(auto, var(--empty-state-illustration-max-width)) minmax(
        auto,
        var(--empty-state-text-container-max-width)
      );
    grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
    padding: var(--spacing-24);
    column-gap: var(--spacing-32);
  }

  .illustrationContainer {
    display: flex;
    align-items: center;
  }

  .illustration,
  .illustrationContainer video {
    max-width: 100%;
    max-height: var(--empty-state-illustration-max-height);
    height: 100%;
    width: auto;
  }

  .textContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-24);
  }

  @container (width <=1024px) {
    .content {
      padding: var(--spacing-16);
    }
  }

  @container (width <=560px) {
    .content {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      column-gap: unset;
      row-gap: var(--spacing-24);
      padding: var(--spacing-24);
    }

    .illustrationContainer {
      --empty-state-illustration-max-height: 210px;

      justify-content: center;
    }

    .heading {
      font-size: 1.25rem;
      line-height: 1.5rem;
    }
  }
}