src/components/molecules/buttons/back-to-top.module.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

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

.wrapper {
  .link {
    width: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)});
    height: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)});

    svg {
      width: 100%;
    }

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

      .arrow-bar {
        opacity: 0;
        transform: translateY(30%) scaleY(0);
        transition: transform 0.45s ease-in-out 0s, opacity 0.1s linear 0.2s;
      }
    }

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

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

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

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