@use "../../styles/colors" as colors;
@use "../../styles/variables" as vars;
@use "../../styles/fonts" as fonts;

// Mirrors Angular `warning-ifly-carrier-detail.component.scss`:
// a narrow orange vertical bar + highlighted leading caption, used
// on details pages for flights in the iFly-operated SU5801–5948 range.
.ifly-warning {
  display: flex;
  align-items: center;
  padding: vars.$space-m vars.$space-xl;

  &__bar {
    width: 0.3rem;
    height: 80px;
    background-color: colors.$orange--hover;
    flex-shrink: 0;
  }

  &__text {
    text-align: left;
    padding: vars.$space-xl;
    font-size: fonts.$font-size-m;
    line-height: 1.5;
  }

  &__highlight {
    font-weight: fonts.$font-bold;
    color: colors.$orange--hover;
  }

  // Inline variant used inside flight list rows. Mirrors Angular
  // `warning-ifly-carrier-small`: span with padded inner text, no
  // vertical bar, no link.
  &--small {
    display: block;
    padding: vars.$space-l vars.$space-xl;
    font-size: fonts.$font-size-s;
    line-height: 1.5;
  }
}
