@layer base, layout, components, utilities, pages;

@layer components {

  /* ==========================================================================
     Share Bar Component
     ========================================================================== */

  .share-bar {
    background: var(--color-slate-50, #f8fafc);
    padding: 32px 0;
  }

  .share-bar__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .share-bar__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-slate-400, #94a3b8);
  }

  .share-bar__actions {
    display: flex;
    gap: 8px;
  }

  .share-bar__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-slate-600, #475569);
    background: #fff;
    border: 1px solid var(--color-slate-200, #e2e8f0);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .share-bar__btn:hover {
    border-color: var(--color-slate-300, #cbd5e1);
    background: var(--color-slate-50, #f8fafc);
  }

  /* Tooltip */
  .share-bar__btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    background: var(--color-navy, #1e3a5f);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 10;
  }

  .share-bar__btn[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-navy, #1e3a5f);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 10;
  }

  .share-bar__btn[data-tooltip]:hover::after,
  .share-bar__btn[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
  }

  .share-bar__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  /* X Button */
  .share-bar__btn--x {
    background: #000;
    border-color: #000;
    color: #fff;
  }

  .share-bar__btn--x:hover {
    background: #333;
    border-color: #333;
  }

  /* Copy Button */
  .share-bar__btn--copy {
    background: #fff;
  }

  .share-bar__btn--copy:hover {
    background: var(--color-navy, #1e3a5f);
    border-color: var(--color-navy, #1e3a5f);
    color: #fff;
  }

  /* Native Share Button */
  .share-bar__btn--native {
    background: var(--color-slate-100, #f1f5f9);
  }

  .share-bar__btn--native:hover {
    background: var(--color-slate-200, #e2e8f0);
  }

  /* Feedback Message */
  .share-bar__feedback {
    margin: 0;
    font-size: 13px;
    color: var(--color-slate-500, #64748b);
  }

  .share-bar__feedback:empty {
    display: none;
  }

  /* ==========================================================================
     Responsive
     ========================================================================== */

  @media (max-width: 600px) {
    .share-bar {
      padding: 24px 0;
    }

    .share-bar__inner {
      padding: 0 20px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .share-bar__label {
      width: 100%;
    }

    .share-bar__actions {
      width: 100%;
    }

    .share-bar__btn {
      flex: 1;
      padding: 0 16px;
    }

    .share-bar__btn span {
      display: none;
    }

    .share-bar__icon {
      width: 18px;
      height: 18px;
    }

    /* Hide tooltip on mobile */
    .share-bar__btn[data-tooltip]::after,
    .share-bar__btn[data-tooltip]::before {
      display: none;
    }
  }
}