/*
* 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/index';

.bpk-dialog-inner {
  z-index: $bpk-zindex-modal;
  width: 100%;
  max-width: $bpk-modal-max-width;
  margin: auto;
  transform: scale(1);
  transition: opacity $bpk-duration-sm ease-in-out,
    transform $bpk-duration-sm ease-in-out;
  outline: 0;
  background-color: $bpk-modal-background-color;
  opacity: $bpk-modal-opacity;
  // FIX: Prevents ugly flickering when tapping inside the dialog in Mobile Safari
  -webkit-tap-highlight-color: transparent;

  @include bpk-box-shadow-xl;
  @include bpk-border-radius-sm;

  &--appear {
    transform: scale(0.9);
    opacity: $bpk-modal-initial-opacity;
  }

  &--appear-active {
    transform: scale(1);
    opacity: $bpk-modal-opacity;
  }

  &__content {
    padding: $bpk-modal-content-padding;
    flex: 1;
    overflow-y: auto;
  }

  &__flare {
    height: $bpk-spacing-base * 10;
    // We inherit radius from the outer modal so they match and align correctly to the container.
    border-radius: inherit;
    background-color: $bpk-color-sky-blue;
  }
}