@use '@gear-js/ui/variables' as *;
@use '@gear-js/ui/headings' as *;
@use '@gear-js/ui/mixins' as *;
@use '@/shared/assets/styles/mixins' as *;
@use '@/shared/assets/styles/shared' as *;
@use '@/shared/assets/styles/animations' as *;

$position: calc(100% + 26px);
$arrowPosition: calc(100% + 1px);

@keyframes wave {
  from {
    opacity: 0.4;
  }

  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

.wrapper {
  position: relative;

  &.active {
    > *:first-child {
      position: relative;
      z-index: 8;

      &::before,
      &::after {
        @extend %absoluteCenter;
        content: '';
        width: 100%;
        height: 100%;
        opacity: 0;
        border: 1px solid $successColor;
        border-radius: 90px;
        pointer-events: none;
        box-shadow: 0px 0px 5px 10px rgba($successColor, 0.05);
      }

      &::before {
        animation: wave 2s linear infinite;
      }

      &::after {
        animation: wave 2s 0.5s linear infinite;
      }
    }

    &.codes,
    &.messages,
    &.explorer,
    &.mailbox,
    &.apps {
      > *:first-child {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }

    &.codes,
    &.messages,
    &.explorer,
    &.mailbox,
    &.apps,
    &.node {
      > *:first-child {
        &::before,
        &::after {
          border-radius: 16px;
        }
      }
    }

    &:not(.wallet) {
      > *:first-child {
        pointer-events: none;
      }
    }
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 7;
  overflow: hidden;
}

.tooltip {
  width: 400px;
  padding: 24px 24px 24px 32px;
  position: absolute;
  background-color: #29292b;
  border-radius: $borderRadiusMedium;
  border: $borderModal;
  z-index: 9;

  &::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid $borderModalColor;
  }

  &.node {
    &::before {
      bottom: 24px;
      right: calc(100% + 1px);
      transform-origin: bottom right;
      transform: rotate(-45deg);
    }
  }

  &.wallet,
  &.message,
  &.code {
    top: $position;
    right: 0;
  }

  &.program {
    top: $position;
    left: 0;
  }

  &.codes,
  &.messages,
  &.explorer,
  &.mailbox,
  &.apps {
    top: 0;
    left: $position;
  }

  &.node {
    bottom: 0;
    left: $position;
  }

  &.wallet,
  &.code,
  &.message {
    &::before {
      bottom: $arrowPosition;
      right: 24px;
      transform-origin: bottom right;
      transform: rotate(-45deg);
    }
  }

  &.program {
    &::before {
      bottom: $arrowPosition;
      left: 24px;
      transform-origin: bottom right;
      transform: rotate(45deg) scaleX(-1);
    }
  }

  &.codes,
  &.messages,
  &.mailbox,
  &.explorer,
  &.apps {
    &::before {
      top: 24px;
      right: $arrowPosition;
      transform-origin: top right;
      transform: rotate(135deg);
    }
  }

  &.node {
    &::before {
      bottom: 24px;
      right: $arrowPosition;
      transform-origin: bottom right;
      transform: rotate(-135deg);
    }
  }
}

.header {
  display: flex;
  margin-bottom: 10px;
  color: #d1d1d1;
}

.steps {
  @include childrenMargin(16px, right);
  display: flex;
}

.prevStepButton {
  transform: rotate(180deg);
}

.main {
  @include childrenMargin(8px);

  &:not(:last-child) {
    margin-bottom: 24px;
  }
}

.heading {
  @extend %h5;
}

.text {
  line-height: 26px;
  color: #d1d1d1;
}

.closeButton {
  margin-left: auto;
}