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

.footer {
  --navbar-size: #{fun.convert-px(80)};

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

  @include mix.media("screen") {
    @include mix.dimensions("sm") {
      --navbar-size: 0px;

      flex-flow: row wrap;
      font-size: var(--font-size-sm);
    }
  }
}

.back-to-top {
  position: fixed;
  bottom: calc(var(--navbar-size, 0px) + var(--spacing-md));
  right: var(--spacing-md);
  transition: all 0.4s ease-in 0s;

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

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