@import '~styles/main';

.badge {
  font-family: 'Roboto Condensed', sans-serif;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  padding: @padding;
  display: flex;
  flex: 2;
  align-items: center;
}

.header__logo {
  display: flex;
  flex: 1;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.header__text {
  flex: 1;
  text-align: right;
}

.header__text--no-logo {
  flex: 1;
  text-align: left;
}

.name {
  padding: @padding;
  background: #fff;
  display: flex;
  flex: 3;
  flex-direction: column;
  justify-content: center;
}

.name--first,
.name--last {
  display: block;
  text-transform: uppercase;
}

.name--first {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: @padding / 2;
}

.footer {
  padding: @padding;
  text-align: right;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.footer--no-logo {
    composes: footer;
    text-align: left;
}

@import '~styles/main';

.badge {
  font-family: 'Roboto Condensed', sans-serif;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  padding: @padding;
  display: flex;
  flex: 2;
  align-items: center;
}

.header__logo {
  display: flex;
  flex: 1;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.header__text {
  flex: 1;
  text-align: right;
}

.header__text--no-logo {
  flex: 1;
  text-align: left;
}

.name {
  padding: @padding;
  background: #fff;
  display: flex;
  flex: 3;
  flex-direction: column;
  justify-content: center;
}

.name--first,
.name--last {
  display: block;
  text-transform: uppercase;
}

.name--first {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: @padding / 2;
}

.footer {
  padding: @padding;
  text-align: right;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.footer--no-logo {
    composes: footer;
    text-align: left;
}

@media print {
  .badge {
    page-break-inside: avoid;
  }
}

Fix badges cutting half when printing.
Fix badges cutting half when printing.
