// src/assets/main.scss
// @import './variables.scss'; // Your custom variables
@use './valerie-ui.scss';

// Example global styles
body {
  font-family: sans-serif;
  margin: 0;
  background-color: var(--bg-color-page, #f4f4f8);
  color: var(--text-color, #333);
}

a {
  color: var(--primary-color);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

// Offline UI styles
.offline-item {
  position: relative;
  opacity: 0.8;
  transition: opacity 0.3s ease;

  &::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16'/%3E%3Cpath d='M16 21h5v-5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: spin 1s linear infinite;
  }

  &.synced {
    opacity: 1;

    &::after {
      display: none;
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

// Disabled offline features
.feature-offline-disabled {
  position: relative;
  cursor: not-allowed;
  opacity: 0.6;

  &::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem;
    background-color: var(--bg-color-tooltip, #333);
    color: white;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
  }

  &:hover::before {
    opacity: 1;
    visibility: visible;
  }
}

// Add more global utility classes or base styles