// Component: Back to Top

@use '00-config' as *;

.c-back-to-top {
  display: none;

  @include breakpoint(gesso-breakpoint(mobile-lg)) {
    align-items: center;
    background-color: gesso-color(button, back-to-top, background);
    border-radius: 50%;
    color: gesso-color(button, back-to-top, color);
    display: flex;
    font-size: rem(60px);
    height: rem(70px);
    inset-block-end: rem(gesso-spacing(2.5));
    inset-inline-end: rem(gesso-spacing(2.5));
    justify-content: center;
    position: fixed;
    transition-duration: gesso-duration(short);
    transition-property: background-color, color, opacity;
    transition-timing-function: gesso-easing(ease-in);
    width: rem(70px);

    &:visited {
      color: gesso-color(button, back-to-top, color);
    }

    &:hover,
    &:focus {
      background-color: gesso-color(button, back-to-top, background-hover);
      color: gesso-color(button, back-to-top, color-hover);
    }

    &[aria-hidden='true'] {
      opacity: 0;
    }
  }
}

// Ensure that the button is always visible (e.g., in Storybook).
.c-back-to-top--always-visible {
  opacity: 1 !important;
}
