/* blankslate */

.blankslate-container {
  container-type: inline-size;
}

.blankslate {
  --blankslate-outer-padding-block: var(--base-size-32);
  --blankslate-outer-padding-inline: var(--base-size-32);

  position: relative;
  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
  text-align: center;

  & p {
    color: var(--fgColor-muted);
    font-size: var(--text-body-size-large);
  }

  & code {
    padding: 2px 5px 3px;
    font-size: var(--text-body-size-medium);
    background: var(--bgColor-default);
    border: var(--borderWidth-thin) solid var(--borderColor-muted);
    border-radius: var(--borderRadius-medium);
  }

  & img {
    width: 56px;
    height: 56px;
  }
}

.blankslate-icon {
  margin-right: var(--control-small-gap);
  margin-bottom: var(--stack-gap-condensed);
  margin-left: var(--control-small-gap);
  color: var(--fgColor-muted);
}

.blankslate-image {
  margin-bottom: var(--stack-gap-normal);
}

.blankslate-heading {
  font-size: var(--text-title-size-medium);
  font-weight: var(--text-title-weight-medium);
  margin-bottom: var(--base-size-4);
}

.blankslate-action {
  margin-top: var(--stack-gap-normal);

  &:first-of-type {
    margin-top: var(--stack-gap-spacious);
  }

  &:last-of-type {
    margin-bottom: var(--stack-gap-condensed);
  }
}

.blankslate-capped {
  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
}

.blankslate-spacious {
  --blankslate-outer-padding-block: var(--base-size-80);
  --blankslate-outer-padding-inline: var(--base-size-40);
}

.blankslate-narrow {
  max-width: 485px;
  margin: 0 auto;
}

/* was .large-format
** QUESTION: should we deprecate this? */
.blankslate-large {
  & img {
    width: 80px;
    height: 80px;
  }

  & h3 {
    margin: var(--stack-gap-normal) 0;

    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
    font-size: 24px;
  }

  & p {
    font-size: var(--text-body-size-large);
  }
}

/* was .clean-background
** TO DO: deprecate this and use utility instead */
.blankslate-clean-background {
  border: 0;
}

/* At the time these styles were written,
   `34rem` was our "small" breakpoint width */
@container (max-width: 34rem) {
  .blankslate {
    --blankslate-outer-padding-block: var(--base-size-20);
    --blankslate-outer-padding-inline: var(--base-size-20);
  }

  .blankslate-spacious {
    --blankslate-outer-padding-block: var(--base-size-44);
    --blankslate-outer-padding-inline: var(--base-size-28);
  }

  .blankslate-icon {
    margin-bottom: var(--stack-gap-condensed);
  }

  .blankslate-heading {
    font-size: var(--text-title-size-small);
  }

  .blankslate p {
    font-size: var(--text-body-size-medium);
  }

  .blankslate-action {
    margin-top: var(--stack-gap-condensed);
    
    &:first-of-type {
      margin-top: var(--stack-gap-normal);
    }
  
    &:last-of-type {
      margin-bottom: calc(var(--stack-gap-condensed) / 2);
    }
  }
}