@use '../config' as *;

.empty {
  --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};

  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));
}