@use '../config' as *;

// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references

// scss-docs-start empty-css-vars
$empty-tokens: () !default;
$empty-tokens: defaults(
  (
    --empty-padding: $empty-padding,
    --empty-padding-md: $empty-padding-md,
    --empty-icon-size: $empty-icon-size,
    --empty-icon-margin-bottom: $empty-icon-margin-bottom,
    --empty-img-margin-bottom: $empty-img-margin-bottom,
    --empty-header-margin-bottom: $empty-header-margin-bottom,
    --empty-header-font-size: $empty-header-font-size,
    --empty-title-margin-bottom: $empty-title-margin-bottom,
    --empty-action-margin-top: $empty-action-margin-top,
  ),
  $empty-tokens
);
// scss-docs-end empty-css-vars

// stylelint-enable custom-property-no-missing-var-function

.empty {
  @include tokens($empty-tokens);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--empty-padding);
  text-align: center;

  @include media-breakpoint-up(md) {
    padding: var(--empty-padding-md);
  }
}

.empty-icon {
  width: var(--empty-icon-size);
  height: var(--empty-icon-size);
  margin: 0 0 var(--empty-icon-margin-bottom);
  line-height: 1;
  color: var(--secondary);

  svg {
    width: 100%;
    height: 100%;
  }
}

.empty-img {
  margin: 0 0 var(--empty-img-margin-bottom);
  line-height: 1;
}

.empty-header {
  margin: 0 0 var(--empty-header-margin-bottom);
  font-size: var(--empty-header-font-size);
  font-weight: var(--font-weight-light);
  line-height: 1;
  color: var(--secondary);
}

.empty-title {
  font-size: $h2-font-size;
  font-weight: $headings-font-weight;
  line-height: $h2-line-height;
}

.empty-title,
.empty-subtitle {
  margin: 0 0 var(--empty-title-margin-bottom);
}

.empty-action {
  margin-top: var(--empty-action-margin-top);
}

.empty-bordered {
  border: var(--border-width) var(--border-style) var(--border-color);
  @include border-radius(var(--border-radius));
}