/*
 * 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-spacing-v2: true;

@mixin hidden-box-shadow-after {
  z-index: 0;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    display: block;
    z-index: -1;
    transition: opacity 200ms ease-in-out;
    border-radius: inherit;
    box-shadow: $bpk-box-shadow-lg;
    opacity: 0;
    pointer-events: none; // To prevent the pseudo element absorbing click events
  }
}

.bpk-ticket {
  $notch-size: bpk-spacing-md();
  $ticket-padding: bpk-spacing-base();

  position: relative;
  display: block;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  color: $bpk-card-color;
  text-decoration: none;
  cursor: pointer;

  @include bpk-box-shadow-sm;
  @include bpk-border-radius-sm;
  @include hidden-box-shadow-after;

  @include bpk-hover {
    &::after {
      opacity: 1;
    }

    .bpk-ticket__paper::after {
      opacity: 1;
    }
  }

  &--vertical {
    flex-direction: column;
  }

  &--with-notches {
    box-shadow: none;

    &::after {
      content: none;
    }
  }

  &__paper {
    position: relative;
    background-color: $bpk-card-background-color;

    &--with-notches {
      @include bpk-box-shadow-sm;
      @include hidden-box-shadow-after;
    }
  }

  @mixin main-styles {
    &--horizontal {
      border-radius: $bpk-border-radius-sm 0 0 $bpk-border-radius-sm;

      @include bpk-rtl {
        border-radius: 0 $bpk-border-radius-sm $bpk-border-radius-sm 0;
      }
    }

    &--vertical {
      border-radius: $bpk-border-radius-sm $bpk-border-radius-sm 0 0;
    }
  }

  &__main {
    flex: 2 1 auto;

    @include main-styles;

    &--padded {
      padding: $ticket-padding;
    }
  }

  &__main-inner {
    height: 100%;
    overflow: hidden;

    @include main-styles;
  }

  @mixin stub-styles {
    &--horizontal {
      min-width: 30%;
      border-radius: 0 $bpk-border-radius-sm $bpk-border-radius-sm 0;

      @include bpk-rtl {
        border-radius: $bpk-border-radius-sm 0 0 $bpk-border-radius-sm;
      }
    }

    &--vertical {
      border-radius: 0 0 $bpk-border-radius-sm $bpk-border-radius-sm;
    }
  }

  &__stub {
    flex: 1 1 auto;

    @include stub-styles;

    &--padded {
      padding: $ticket-padding;
    }
  }

  &__stub-inner {
    height: 100%;
    overflow: hidden;

    @include stub-styles;
  }

  &__punchline {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    background-color: $bpk-card-background-color;

    &--horizontal {
      height: $bpk-one-pixel-rem * 2;
      background-image: linear-gradient(
        $bpk-color-sky-gray-tint-06,
        $bpk-color-sky-gray-tint-06
      );
      background-repeat: repeat-x;
      background-position: 0 50%;
      background-size: 8 * $bpk-one-pixel-rem 2 * $bpk-one-pixel-rem;
    }

    &--horizontal-with-notches {
      height: $notch-size * 2;
      margin: auto $notch-size;
      padding: 0 $notch-size;
      background-image: linear-gradient(
        $bpk-color-sky-gray-tint-06,
        $bpk-color-sky-gray-tint-06
      );
      background-repeat: repeat-x;
      background-position: 0 50%;
      background-size: 8 * $bpk-one-pixel-rem 2 * $bpk-one-pixel-rem;
    }

    &--vertical {
      width: $bpk-one-pixel-rem * 2;
      background-image: linear-gradient(
        $bpk-color-sky-gray-tint-06,
        $bpk-color-sky-gray-tint-06
      );
      background-repeat: repeat-y;
      background-position: 50% 0;
      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
    }

    &--vertical-with-notches {
      width: $notch-size * 2;
      margin: $notch-size auto;
      padding: $notch-size 0;
      background-image: linear-gradient(
        $bpk-color-sky-gray-tint-06,
        $bpk-color-sky-gray-tint-06
      );
      background-repeat: repeat-y;
      background-position: 50% 0;
      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
    }

    &--fallback {
      display: table-cell;
      width: 2 * $bpk-one-pixel-rem;
      background-image: linear-gradient(
        $bpk-color-sky-gray-tint-06,
        $bpk-color-sky-gray-tint-06
      );
      background-repeat: repeat-y;
      background-position: 50% 0;
      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
    }
  }

  &__notch {
    position: absolute;
    width: $notch-size * 2;
    height: $notch-size;
    overflow: hidden;

    &::after {
      position: relative;
      content: '';
      display: block;
      width: $notch-size * 4;
      height: $notch-size * 4;
      transform: translate3d(
        0,
        0,
        0
      ); // BPK-1011 fix rendering bug in safari 11

      border: $notch-size solid $bpk-color-white;
      border-radius: $notch-size * 2;
      box-shadow: $bpk-box-shadow-sm inset;
    }

    &--top {
      top: -$notch-size;

      &::after {
        right: -50%;
        bottom: 200%;
        left: -50%;
      }
    }

    &--right {
      right: -$notch-size;
      width: $notch-size;
      height: $notch-size * 2;

      &::after {
        right: 100%;
        bottom: 50%;

        @include bpk-rtl {
          right: auto;
          left: 200%;
        }
      }
    }

    &--bottom {
      bottom: -$notch-size;

      &::after {
        right: -50%;
        bottom: 100%;
        left: -50%;
      }
    }

    &--left {
      left: -$notch-size;
      width: $notch-size;
      height: $notch-size * 2;

      &::after {
        right: 200%;
        bottom: 50%;

        @include bpk-rtl {
          right: auto;
          left: 100%;
        }
      }
    }
  }
}