:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  // Description
  --neeto-ui-no-data-description-margin-top: 0.5rem;

  // Help Text
  --neeto-ui-no-data-help-text-margin-top: 0.5rem;

  // Image
  --neeto-ui-no-data-image-margin-bottom: 1.5rem;
  --neeto-ui-no-data-image-max-width: 11.5rem;
  --neeto-ui-no-data-image-height: auto;

  // Action Block
  --neeto-ui-no-data-action-block-margin-top: 1.5rem;
  --neeto-ui-no-data-action-block-gap: 0.5rem;
}

.neeto-ui-no-data {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &__description {
    margin-top: var(--neeto-ui-no-data-description-margin-top);
  }

  &__help-text {
    margin-top: var(--neeto-ui-no-data-help-text-margin-top);
  }

  &__image {
    margin-bottom: var(--neeto-ui-no-data-image-margin-bottom);

    img {
      max-width: var(--neeto-ui-no-data-image-max-width);
      height: var(--neeto-ui-no-data-image-height);
    }
  }

  &__action-block {
    margin-top: var(--neeto-ui-no-data-action-block-margin-top);
    gap: var(--neeto-ui-no-data-action-block-gap);

    display: flex;
    justify-content: center;
    align-items: center;

    @include viewport(mob) {
      flex-direction: column;
    }
  }
}

.neetix-nodata {
  --neeto-ui-no-data-image-margin-bottom: 2rem;
  --neeto-ui-no-data-image-max-width: 20rem;
  --neeto-ui-no-data-action-block-margin-top: 2rem;
}
