@import '../../globals/scss/vars';
@import '../../globals/scss/colors';
@import '../../globals/scss/theme';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/typography';
@import '../../globals/scss/vendor/@rocketsoftware/elements/scss/import-once/import-once';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/css--font-face';
@import '../../globals/scss/layer';

/* stylelint-disable declaration-empty-line-before, scss/double-slash-comment-inline,
max-nesting-depth   */

.#{$prefix}--tour-tooltip {
  @include layer('overlay');
  @include reset;
  min-width: rem(288px);
  max-width: rem(400px);
  font-size: rem(14px);
  background: $inverse-02;
  border-radius: rem(2px);
  z-index: z('floating');
  word-wrap: break-word;
  color: $inverse-01;
  display: grid;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;

  p {
    @include type-style('body-short-01');
  }

  button {
    padding-right: $carbon--spacing-07;
  }

  .#{$prefix}--btn:focus {
    border-color: $inverse-focus-ui;
    outline-color: $inverse-02;
  }

  .#{$prefix}--link {
    color: $inverse-link;
    margin-right: auto;

    &:focus {
      outline: 1px solid $inverse-focus-ui;
      outline-offset: 2px;
    }

    &:active {
      color: $inverse-01;
    }

    &:visited {
      color: $inverse-link;
    }
  }

  .#{$prefix}--tour-tooltip__flip-button {
    height: 3rem;
    width: 3rem;
    padding: rem(12px);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    fill: $inverse-01;
    background-color: transparent;
    transition: background-color $duration--fast-02 motion(standard, productive);
    &:hover {
      background-color: $inverse-hover-ui;
    }

    &:focus {
      outline: none;
      border-color: $inverse-focus-ui;
    }
  }

  .#{$prefix}--tour-tooltip__close-button {
    height: 3rem;
    width: 3rem;
    padding: rem(12px);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    fill: $inverse-01;
    background-color: transparent;
    transition: background-color $duration--fast-02 motion(standard, productive);

    &:hover {
      background-color: $inverse-hover-ui;
    }

    &:focus {
      outline: none;
      border-color: $inverse-focus-ui;
    }
  }

  .#{$prefix}--tour-tooltip__header {
    display: flex;
    flex-direction: row-reverse;
    margin-right: -1rem; // push buttons all the way to side without disrupting padding for rest of card
  }

  .#{$prefix}--tour-tooltip__title {
    font-size: rem(16px);
    margin: 1rem 0;
    margin-right: auto;
  }

  .#{$prefix}--tour-tooltip__body {
    margin-bottom: 1rem;
  }

  .#{$prefix}--tour-tooltip__action-group {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .#{$prefix}--btn--primary {
    margin-left: $spacing-04;
  }

  // start flipping logic

  // put both card faces in the same grid slot, so that they take up the same space
  // position: absolute not sufficient because the faces are the only elements being
  // rendered in the parent, so removing them both from the flow gives the parent a height of zero
  .#{$prefix}--tour-tooltip__face {
    backface-visibility: hidden;
    grid-column: 1;
    grid-row: 1;
    position: relative;
    padding: 1rem;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  .#{$prefix}--tour-tooltip--back {
    transform: rotateX(180deg);
  }

  .#{$prefix}--tour-tooltip--front {
    //firefox wants to know what side is the front else backface-visibility doesn't work
    transform: rotateX(0deg);
    z-index: 2;
  }
}

.#{$prefix}--tour-tooltip.flipped {
  transform: rotateX(180deg);
}

// end flipping logic

// ---------------------------------
// tooltip wrapper for 3d effect
// ---------------------------------
.#{$prefix}--tour-tooltip--container {
  perspective: 1000px;
}