/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016-2021 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '~bpk-mixins';

$bpk-spacing-v2: true;

.bpk-flare-stories {
  padding: bpk-spacing-xl();

  &__flare-bar {
    width: 100%;
    margin-bottom: 2rem;

    &--svg {
      fill: $bpk-color-sky-gray;
    }
  }

  &__content-bubble {
    width: 100%;
    max-width: 45rem;
    margin-bottom: 2rem;
    background-color: $bpk-color-abisko;
    color: $bpk-color-white;

    &--image {
      background-image: url('https://images.unsplash.com/photo-1556873992-0b43b3ac5ec1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=5730&q=80 5730w');
    }

    &--full-width {
      width: 100vw;
      max-width: none;
      margin-left: calc(-50vw + 50%);
    }

    &--fixed-height {
      height: bpk-spacing-xxl() * 5;

      &--large {
        height: 45rem;
      }
    }
  }

  &__content {
    max-width: 45rem;
    margin: bpk-spacing-xl();
    color: $bpk-color-white;
  }
}