@use "src/app/styles/variables" as *;

.content-wrapper {
  margin-top: 36px;
  display: flex;
  align-items: flex-start;

  @media (max-width: $small) {
    flex-wrap: wrap;
  }
}

.badge-card {
  width: 50%;
  margin-right: 18px;
  min-width: 0;

  .subtitle {
    margin-bottom: 22px;
  }

  @media (max-width: $small) {
    width: 100%;
    margin-right: 0;
  }
}

.second-subtitle {
  padding-top: 24px;
}

.icon-badge-card {
  width: 50%;
  margin-left: 18px;
  min-width: 0;

  @media (max-width: $small) {
    width: 100%;
    margin-left: 0;
    margin-top: 36px;
  }
}

.icon-badge-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
}

.icon-badge + .icon-badge {
  margin-left: 16px;
}

.tabs-badge-wrapper {
  margin: 16px 0;

  // MDC tab wrappers clip absolutely positioned badge content by default.
  // Keep overflow visible only for this demo block.
  ::ng-deep .mat-mdc-tab-header,
  ::ng-deep .mat-mdc-tab-label-container,
  ::ng-deep .mat-mdc-tab-list,
  ::ng-deep .mat-mdc-tab-labels,
  ::ng-deep .mat-mdc-tab,
  ::ng-deep .mdc-tab,
  ::ng-deep .mdc-tab__content,
  ::ng-deep .mdc-tab__text-label {
    overflow: visible !important;
  }
}

.tab-title {
  margin: 0;
  width: 100%;

  & span.mat-badge-content {
    margin-right: -8px !important;
    top: -10px !important;
    padding: 0;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
  }
}

.empty-block {
  width: 100%;
  height: 1px;
}

.text {
  width: fit-content;
  margin: 24px 0;
}

// Counter badge on the demo button should stay compact.
.badge-card button.mat-badge .mat-badge-content {
  min-width: 14px !important;
  min-height: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  font-size: 10px !important;
  padding: 0 !important;
}

.h1 {
  @media (max-width: $normal) {
    display: none;
  }
}

.chips-card {
  margin-top: 36px;
}
