@use "../../wc";

:host {
  display: block;
  container-type: inline-size;
  width: 100%;
}

.empty-state {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--zn-spacing-x-small);

  ::slotted(*) {
    display: flex;
    margin-top: var(--zn-spacing-small);
  }

  .caption {
    font-weight: var(--zn-font-weight-semibold);
    font-size: var(--zn-font-size-large);
    line-height: var(--zn-line-height-dense);
    color: rgb(var(--zn-text-heading));
    text-align: center;
  }

  .description {
    font-size: var(--zn-font-size-small);
    line-height: var(--zn-line-height-normal);
    color: rgb(var(--zn-text));
    text-align: center;
  }

  &__wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--zn-spacing-x-small);
    padding: var(--zn-spacing-large);
    flex-grow: 1;
  }

  // Colors

  &--error {
    background-color: rgba(var(--zn-color-error), .05);
    min-height: 100px;

    .empty-state__wrapper {
      border: dashed 1px rgb(var(--zn-color-error)) !important;
    }

    ::slotted(*), .caption, .description {
      color: rgb(var(--zn-color-error));
    }
  }

  &--info {
    background-color: rgba(var(--zn-color-info), .05);
    min-height: 100px;

    .empty-state__wrapper {
      border: dashed 1px rgb(var(--zn-color-info)) !important;
    }

    ::slotted(*), .caption, .description {
      color: rgb(var(--zn-color-info));
    }
  }

  &--primary {
    background-color: rgba(var(--zn-primary), .05);
    min-height: 100px;

    .empty-state__wrapper {
      border: dashed 1px rgb(var(--zn-primary)) !important;
    }

    ::slotted(*), .caption, .description {
      color: rgb(var(--zn-primary));
    }
  }

  // End colors

  &--padded {
    padding: var(--zn-spacing-medium);
  }
}