@use "../_layout/mixins";

$buttonTransitions: color 0.2s ease-out, background-color 0.2s ease-out,
  border-color 0.2s ease-out;

.scrollToTop {
  @include mixins.button();
  --button-bg: var(--accent);
  --button-color: var(--blue--ultraDark);
  --button-border-color: var(--blue--ultraDark);
  --button-size: var(--step-0);
  padding: 0 0.5em;
  position: fixed;
  bottom: var(--offsetBottom, 2em);
  right: var(--offsetRight, 2em);
  z-index: calc(var(--z) * 20);
  display: flex;
  flex-direction: column;
  text-align: center;
  text-transform: uppercase;
  font-weight: var(--bold-weight);
  max-width: 6em;
  visibility: hidden;
  opacity: 0;
  transition: $buttonTransitions, visibility 0.3s, opacity 0.2s ease-out;

  &:hover,
  &:focus,
  &:active {
    opacity: 1;
  }
}
.scrollToTop__icon {
  margin-block-start: -0.05em;
  margin-block-end: -0.2em;
  font-size: var(--step-4);
  --color: var(--button-color);
  @include mixins.boldIcon();
}
.scrollToTop--visible {
  visibility: visible;
  opacity: 0.6;
  transition: $buttonTransitions, visibility 0s, opacity 0.2s ease-out;
}