@use 'sass:map';
@use '../../scss/font-mixins' as fonts;
@use '../../scss/spacers' as spacers;
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';

.emptystate {
  display: flex;
  flex-flow: row;
  gap: spacers.getSpacer(s);
  padding: spacers.getSpacer(s);
  align-items: center;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    gap: spacers.getSpacer(m);
    padding: spacers.getSpacer(l);
  }

  &--dashed {
    border-radius: 16px;
    border-style: dashed;
    border-width: 1px;
    border-color: var(--color-base-border-onlight-emphasized);
  }

  &--blank {
    border: none;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      padding-left: spacers.getSpacer(2xs);
    }
  }

  &--compact {
    border-radius: 4px;
    gap: spacers.getSpacer(3xs);
    padding: spacers.getSpacer(2xs);
    min-height: spacers.getSpacer(2xl);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
    align-items: center;
  }

  &__illustration {
    align-self: flex-start;
  }

  &__text {
    display: flex;
    flex-flow: column;
    gap: spacers.getSpacer(3xs);

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      gap: spacers.getSpacer(xs);
    }
  }

  &__additional-text {
    @include fonts.body;
  }
}