@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;

.wrapper {
  display: flex;
  flex-flow: column wrap;
  gap: var(--spacing-xs);
  place-items: center;
  place-content: center;
  padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md));
  border-top: fun.convert-px(3) solid var(--color-border-light);

  @include mix.media("screen") {
    @include mix.dimensions("sm") {
      flex-flow: row wrap;
      font-size: var(--font-size-sm);
    }
  }
}

.back-to-top {
  --button-size: #{fun.convert-px(55)};
  --icon-size: #{fun.convert-px(32)};

  position: fixed;
  bottom: calc(var(--toolbar-size) + var(--spacing-md));
  right: var(--spacing-md);
  transition: all 0.4s ease-in 0s;

  &--hidden {
    opacity: 0;
    transform: translateY(calc(var(--button-size) + var(--spacing-md)));
  }

  &--visible {
    opacity: 1;
    transform: translateY(0);
  }

  a {
    display: flex;
    place-content: center;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);

    svg {
      height: 85%;
    }

    :global {
      .arrow-head {
        transform: translateY(30%);
        transition: all 0.45s ease-in-out 0s;
      }

      .arrow-bar {
        opacity: 0;
        transform: translateY(30%) translateX(25%) scale(0.5);
        transition: transform 0.45s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
      }
    }

    &:hover,
    &:focus {
      :global {
        .arrow-head {
          transform: translateY(0);
        }

        .arrow-bar {
          opacity: 1;
          transform: translateY(0) translateX(0) scale(1);
        }
      }

      svg {
        :global {
          animation: pulse 1.2s ease-in-out 0.6s infinite;
        }
      }
    }

    &:active {
      svg {
        animation-play-state: paused;
      }
    }
  }
}