// ------------------------------------\
// STICKYHELP
// ------------------------------------/

.a-stickyHelp-body {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

// BUTTON: OPEN STICKYHELP
.a-stickyHelp-open {
  @include a-fontMedium;
  position: fixed;
  right: $spacer * 2;
  bottom: $spacer * 2;
  z-index: 1051;
  padding: 14px 24px 9px 24px;
  margin-bottom: 0;
  color: $white;
  background: $purple;
  border-radius: 50px;

  &:hover,
  &:active,
  &:focus {
    color: $white;
    background: $purple-hover-color;
  }

  &.a-stickyHelp-animationHint {
    animation: hintTextSlideIn 400ms;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

    .a-stickyHelp-openText {
      position: absolute;
      left: 0;
      display: block;
      float: left;
      width: 100%;
      height: auto;
      padding-top: 5px;
      padding-right: 18px;
      clip: auto;
      opacity: 0;

      animation: hintTextAppear 300ms;
      animation-timing-function: linear;
      animation-delay: 2.7s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }
  }

  &[aria-expanded='true'] {
    &.a-stickyHelp-animationHint {
      animation: none;

      .a-stickyHelp-openText {
        animation: none;
      }
    }
  }

  i {
    @include a-fontSize30;
    font-style: normal;
  }
}

@keyframes hintTextSlideIn {
  0% {
    padding-left: 24px;
  }

  100% {
    padding-left: 180px;
  }
}

@keyframes hintTextAppear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// Iframe container
.a-iframeToggle {
  position: fixed;
  bottom: $spacer;
  left: $spacer;
  z-index: 1052;
  width: calc(100% - 24px) !important;
  max-width: 100% !important;
  // overflow: hidden;
  background: transparent;
  transition: all 400ms;
  transform: translate(0, 0);

  @include media-breakpoint-up( sm ) {
    right: $spacer;
    left: auto;
    width: 356px !important;
    max-width: 356px !important;
  }

  &::before {
    position: absolute;
    top: 100%;
    right: 5%;
    bottom: 30px;
    width: 1px;
    height: 1px;
    content: '';
    background: transparent;
    border-radius: 90%;
    transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  &.collapsing {
    margin-right: $spacer * 2;
    margin-bottom: $spacer * 2;

    &::before {
      background: $purple;
    }

    .a-stickyHelp-close {
      opacity: 0;
    }
  }

  iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 414px !important;
    max-height: calc(100vh - 24px);
    opacity: 0;

    @include media-breakpoint-up( sm ) {
      width: 356px !important;
      max-width: 356px !important;
    }
  }

  .a-stickyHelp-close {
    opacity: 0;
  }

  // VISIBLE (After animation)
  &.show {
    right: $spacer;
    bottom: $spacer * 0.5;
    display: block;
    visibility: visible;
    transition: all 400ms;
    transform: translate(0, 0) !important;

    &::before {
      top: auto;
      right: 0%;
      bottom: 8px;
      display: block;
      width: 100% !important;
      max-width: 100% !important;
      height: 414px !important;
      margin-top: -261px;
      margin-left: -178px;
      // background-color: $purple-hover-color;
      border-radius: 0;
      transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);

      @include media-breakpoint-up( sm ) {
        width: 356px !important;
        max-width: 356px !important;
        height: 414px !important;
        background: $white;
      }
    }

    iframe {
      position: relative;
      overflow: hidden;
      background: $white;
      border: none;
      box-shadow: $shadow;
      opacity: 1;
      transition: all 200ms ease 400ms;
    }

    .a-stickyHelp-close {
      position: absolute;
      top: $spacer;
      right: $spacer;
      z-index: 9999;
      width: 30px;
      height: 30px;
      padding: 3px 0 $spacer * 0.5 0;
      margin-bottom: 0;
      pointer-events: auto;
      cursor: pointer;
      background: $white;
      border: none;
      border-radius: 50%;
      opacity: 0;

      @keyframes showCloseButtonAfterLoad {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }

      animation: showCloseButtonAfterLoad 100ms;
      animation-timing-function: linear;
      animation-delay: 600ms;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;

      &:hover {
        border: none;
        opacity: 0.7;
      }

      &:focus {
        background: $blue-light;
        border: none;
      }

      &::before {
        position: absolute;
        top: -15px;
        left: -16px;
        z-index: 1;
        width: calc( 100% + 30px);
        min-height: 60px;
        cursor: pointer;
        content: '';
      }
    }
  }
}

.a-stickyHelp {
  .a-stickyHelp-header {
    position: relative;
    min-height: 54px;
    padding: $spacer;
    color: $white;
    background: $purple;

    h1 {
      @include a-fontMedium;
      text-align: center;
      align-self: center;

      i {
        margin-top: -4px;
      }
    }

    // Back button
    .a-stickyHelp-back {
      position: absolute;
      top: $spacer;
      left: $spacer;
      width: 30px;
      height: 30px;
      padding: 3px 0 $spacer * 0.5 0;
      margin-bottom: 0;
      cursor: pointer;
      background: $white;
      border: none;
      border-radius: 50%;

      &:hover {
        border: none;
        opacity: 0.7;
      }

      &:focus {
        background: $blue-light;
        border: none;
      }

      i {
        line-height: 0 !important;
      }
    }
  }

  .a-stickyHelp-search {
    padding: $spacer $spacer 0 $spacer;
  }

  .a-page {
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: transform 0.5s cubic-bezier(0.3, 1, 0.5, 1);

    &.a-next-page {
      transform: translate3d(100%, 0, 0);
    }

    &.a-current-page {
      visibility: visible;
      transform: translate3d(0, 0, 0);
    }

    &.a-previous-page {
      transform: translate3d(-100%, 0, 0);
    }

    &+.a-page {
      margin-top: -300px;
    }

    // Article (level 3)
    .a-stickyHelp-articleIntro {
      padding: $height42;
      padding-left: 52px;

      h1 {
        @include a-fontSize20;
        padding-top: 0;
        margin-top: 0;
      }

      p,
      .a-leadText {
        @include a-fontSize16;
      }
    }

    .a-text {
      &.epi-wysiwyg {
        padding: $height42;
        padding-left: 52px;

        &.pt-2 {
          padding-top: 0 !important;
        }

        &.pt-lg-3 {
          padding-top: 0 !important;
        }

        h2 {
          @include a-fontSize18;
          padding-top: 0;
          padding-left: 0;
          margin-top: 0;
        }

        .a-circle-list {
          width: calc(100% + 26px);
          margin-left: -52px;

          li {
            width: calc(100% + 40px);
            padding: $spacer $spacer $spacer 52px;
            margin-bottom: $spacer;
            margin-left: 0;
            border-bottom: 1px solid $grey-light;

            &::before {
              padding: 7px 9px 4px;
              margin-right: 10px;
              margin-left: -41px;
            }

            &:first-child {
              border-top: 1px solid $grey-light;
            }

            &:last-child {
              margin-bottom: 0;
              border-bottom: none;
            }
          }
        }

        .a-stickyHelp-footer {
          width: calc(100% + 64px);
          margin-left: -52px;
        }
      }

      .a-stickyHelp-footer {
        width: calc(100% + 24px);
        margin-left: -$spacer;
      }
    }
  }

  // Article has its own scroll, don't need scroll from parent.
  .a-page-hasArticleInside {
    overflow: hidden;
  }
}

.a-stickyHelp-content-target {
  overflow: hidden;
  background: $white;


  h2 {
    @include a-fontSize18;
    padding: $height42;
    padding-left: 52px;
    margin-bottom: 0;
  }

  .a-stickyHelp-questionList {
    li {
      border-bottom: 1px solid $grey-light;

      a {
        display: block;
        padding: $height42;
        padding-left: 52px;
        border: none;

        &:hover,
        &:focus,
        &:active {
          background: $grey-lighter;
        }

        &.a-stickyHelp-iconLeft {
          padding-left: 23px;
        }

        i {
          margin-top: -3px;
        }
      }

      &:first-child {
        border-top: 1px solid $grey-light;
      }
    }
  }

  .a-stickyHelp-footer {
    width: 100%;
    color: $black;

    a {
      @include a-fontMedium;
      display: block;
      padding: $height42;
      padding-left: 52px;
      border-bottom: 1px solid $grey-light;

      &:hover,
      &:focus,
      &:active {
        background: $grey-lighter;
      }

      &:first-child {
        border-top: 1px solid $grey-light;
      }

      &.a-stickyHelp-iconLeft {
        padding-left: 25px;
      }

      i {
        margin-top: -3px;
      }
    }
  }

  .a-stickyHelp-questionList + .a-stickyHelp-footer {
    a {
      &:first-child {
        border-top: none !important;
      }
    }
  }
}