// === ScrollTop ===
.scrollTop {
  //
}

// === [ Adaptive ] ===

// === Desktop ===
@media (max-width: 1280px) {
  //
}

@media (min-width: 1024px) {
  //
}

// === Tablet && Desktop ===
@media (min-width: 768px) {
  .scrollTop {
    left: 20px;
    bottom: -50px;
    width: 50px;
    height: 50px;
    background-color: #23282e;
    border: 0;
    border-radius: 6px;
    opacity: 0;
    will-change: opacity, transform, bottom;
    transform: translate3d(0, 80px, 0);
    transition: opacity 0.2s 0s ease-out, transform 0.3s 0s ease-out,
      bottom 0s 0.3s linear;
    position: fixed;
    display: block;
    z-index: 10;

    &--show {
      bottom: 20px;
      opacity: 0.3;
      transform: translate3d(0, 0, 0);
      transition: opacity 0.2s 0s ease-in,
        transform 0.3s 0s cubic-bezier(0, 1, 0.3, 1.15), bottom 0s 0s linear;

      &:hover {
        opacity: 0.75;
      }

      &:active {
        opacity: 0.5;
        transform: translate3d(0, 2px, 0);
      }
    }

    &__icon {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 30px;
      height: 30px;
      position: absolute;
      pointer-events: none;
    }
  }
}

// === Tablet ===
@media (max-width: 1024px) {
  //
}

// === Mobile ===
@media (max-width: 768px) {
  .scrollTop {
    display: none;
  }
}

@media (max-width: 425px) {
  //
}