/* ==========================================================================
   Back to Top Component
   Fixed position button anchored to bottom right of viewport.
   Hidden when ISI-full is visible in viewport.
   ========================================================================== */

[data-component-id="livmarli:back-to-top"] {
  &.back-to-top {
    position: fixed;
    bottom: calc(var(--isi-collapsed-height-sm) + var(--space-4));
    right: var(--space-4);
    z-index: 250;
    
    /* Button styling - matches branded button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    
    font-family: inherit;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
    
    color: var(--color-white);
    background: linear-gradient(90deg, #005DA6 0%, #1B3D6D 100%);
    border: none;
    border-radius: 9999px;
    padding: 0.75em 1.25em;
    
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    
    /* Animation for show/hide */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: 
      opacity 300ms ease,
      visibility 300ms ease,
      transform 300ms ease,
      bottom 150ms ease,
      background 150ms ease;
    
    /* Adjust position for larger screens */
    @media (min-width: 1024px) {
      bottom: calc(var(--isi-collapsed-height) + var(--space-6));
      right: var(--space-6);
      font-size: 1.125rem;
      padding: 0.75em 1.5em;
    }
  }

  /* Visible state */
  &.back-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Hover state */
  &.back-to-top:hover {
    background: #003A70;
  }

  /* Focus state */
  &.back-to-top:focus-visible {
    outline: 2px solid #0055B8;
    outline-offset: 2px;
  }

  /* Active/pressed state */
  &.back-to-top:active {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), #003A70;
  }

  /* Label */
  .back-to-top__label {
    margin-bottom: 2px;
  }

  /* Icon */
  .back-to-top__icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    transition: transform 150ms ease;
  }

  &.back-to-top:hover .back-to-top__icon {
    transform: translateY(-2px);
  }
}

/* CSS baseline: positions button above the collapsed ISI bar (JS overrides this inline
   for all other ISI states — preview, expanded — using offsetHeight measurement). */