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

$arrow-size: bpk-spacing-sm();
$dark-background-color: $bpk-color-sky-gray;

.bpk-tooltip-portal {
  z-index: $bpk-zindex-tooltip;

  &[x-placement='top'] {
    margin-bottom: $arrow-size;
  }

  &[x-placement='right'] {
    margin-left: $arrow-size;
  }

  &[x-placement='bottom'] {
    margin-top: $arrow-size;
  }

  &[x-placement='left'] {
    margin-right: $arrow-size;
  }
}

.bpk-tooltip {
  transition: opacity $bpk-duration-sm ease-in-out,
    transform $bpk-duration-sm ease-in-out;
  outline: 0;
  opacity: 1;

  &--appear {
    opacity: 0;

    .bpk-tooltip-portal[x-placement='top'] &:not(.bpk-tooltip--appear-active) {
      transform: translate(0, -1rem);
      transition: none;
    }

    .bpk-tooltip-portal[x-placement='right']
      &:not(.bpk-tooltip--appear-active) {
      transform: translate(1rem, 0);
      transition: none;
    }

    .bpk-tooltip-portal[x-placement='bottom']
      &:not(.bpk-tooltip--appear-active) {
      transform: translate(0, 1rem);
      transition: none;
    }

    .bpk-tooltip-portal[x-placement='left'] &:not(.bpk-tooltip--appear-active) {
      transform: translate(-1rem, 0);
      transition: none;
    }
  }

  &--appear-active {
    transform: translate(0, 0);
    transition: opacity $bpk-duration-sm ease-in-out,
      transform $bpk-duration-sm ease-in-out;
    opacity: 1;
  }

  &__arrow {
    @include bpk-layer-arrow($arrow-size);

    .bpk-tooltip-portal[x-placement='top'] & {
      @include bpk-layer-arrow-bottom($arrow-size);
    }

    .bpk-tooltip-portal[x-placement='right'] & {
      @include bpk-layer-arrow-left($arrow-size);
    }

    .bpk-tooltip-portal[x-placement='bottom'] & {
      @include bpk-layer-arrow-top($arrow-size);
    }

    .bpk-tooltip-portal[x-placement='left'] & {
      @include bpk-layer-arrow-right($arrow-size);
    }

    &--dark {
      .bpk-tooltip-portal[x-placement='top'] & {
        @include bpk-layer-arrow-bottom(
          $arrow-size,
          $dark-background-color,
          $dark-background-color
        );
      }

      .bpk-tooltip-portal[x-placement='right'] & {
        @include bpk-layer-arrow-left(
          $arrow-size,
          $dark-background-color,
          $dark-background-color
        );
      }

      .bpk-tooltip-portal[x-placement='bottom'] & {
        @include bpk-layer-arrow-top(
          $arrow-size,
          $dark-background-color,
          $dark-background-color
        );
      }

      .bpk-tooltip-portal[x-placement='left'] & {
        @include bpk-layer-arrow-right(
          $arrow-size,
          $dark-background-color,
          $dark-background-color
        );
      }
    }
  }

  &__inner {
    overflow: hidden;

    @include bpk-layer;

    &--padded {
      padding: bpk-spacing-sm() bpk-spacing-md();
    }

    &--dark {
      color: $bpk-color-white;

      @include bpk-layer($dark-background-color, $dark-background-color);
    }
  }
}