.empty-state {
  $component-name: ".empty-state";
  display: flex;
  flex-direction: column;
  align-items: center;

  border-top: $width-border solid color("border");
  border-bottom: $width-border solid color("border");
  padding: spacing(-1) 0;

  &__text {
    @include set-font($typography-h1-fontsize - 1, "single", $weight: "light");
    max-width: $line-width-max;
    margin: 0 spacing(-1);
    text-align: center;
    color: color("foreground-secondary");

    #{$component-name}--inline & {
      @include set-font(0, "single", $weight: "light");
      margin: 0 spacing(-2);
    }
  }

  &__text-secondary {
    @include set-font(0, "single");
    max-width: $line-width-max;
    color: color("foreground-secondary");
    margin: spacing(-5) spacing(-1) 0 spacing(-1);
    text-align: center;

    #{$component-name}--inline & {
      @include set-font(-1, "single");
      margin-top: 0;
    }

    p {
      margin: 0;
    }
  }

  &__actions {
    margin-top: spacing(-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:first-child {
      margin-top: 0;
    }
  }

  &--vertical-margin {
    margin-top: spacing(-1);
    margin-bottom: spacing(-1);
  }

  &--inline {
    border: none;
    padding: 0;
  }

  &--constrain-width {
    max-width: $line-width-max;
  }
}