// Mirrors Angular's `_logos.scss` sizing: per-carrier @include scale()
// with a 120px base width and aspect-ratio-specific height. Most wide
// logos (SU, F7, KL…) render at ~120×31; FV/Rossiya is narrower, HZ/Aurora
// tall-square. We bake in the common ratios instead of a one-size-fits-all
// 90×24 that previously clipped SU's ascender.
.operator-logo {
  display: inline-block;
  width: 120px;
  height: 31px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  flex-shrink: 0;

  // Large (1.5× scale) used in the details-header badge. Angular keeps
  // round icons the same size even when 'large' is set.
  &--large {
    width: 180px;
    height: 46px;

    &.operator-logo--round { width: 36px; height: 36px; }
  }

  // Carrier-specific aspect ratios transcribed from Angular's _logos.scss
  // @include scale($width-base, $ratio) calls.
  &--SU,
  &--F7 { width: 120px; height: 31px; }
  &--HZ { width: 80px; height: 44px; }
  &--FV { width: 90px; height: 15px; }
  &--RO { width: 120px; height: 40px; }
  &--DP { width: 120px; height: 23px; }
  &--KL { width: 120px; height: 53px; }
  &--S7 { width: 120px; height: 40px; }
  &--SN { width: 120px; height: 20px; }
  &--FB { width: 120px; height: 36px; }
  &--CI { width: 120px; height: 19px; }
  &--AF { width: 120px; height: 15px; }
  &--AZ { width: 120px; height: 29px; }

  // Round variant must override per-carrier widths; placed AFTER the
  // carrier rules so it wins the same-specificity cascade. Without this
  // ordering, e.g. `.operator-logo--FV.operator-logo--round` picked up
  // the 90×15 FV rectangle and two round logos in a schedule row
  // overflowed their 120px column into the time cell.
  &--round {
    width: 36px;
    height: 36px;
    background-size: contain;
    background-position: center;
  }

  @media (min-width: 641px) and (max-width: 1050px) {
    // Angular's tablets() scale: width & height * 0.75.
    width: 90px;
    height: 23px;

    &--round { width: 30px; height: 30px; }
  }
}

.details-header-badge__airline .operator-logo {
  width: 180px;
  height: 46px;
}

// Round variant inside the details-header-badge must override the
// 180×46 rule above — Angular's `.company-logo.round` pins at 36×36
// regardless of the `large` flag, so per-flight badges in a connecting
// summary show a compact round airline icon next to "SU 6188", not a
// full-width wordmark. Higher specificity (class×2) beats the plain
// `.details-header-badge__airline .operator-logo` above.
.details-header-badge__airline .operator-logo.operator-logo--round {
  width: 36px;
  height: 36px;
}
