pinakes/crates/pinakes-ui/assets/styles/_base.scss

@use 'variables' as *;
@use 'mixins' as *;

// Reset & base
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  @include scrollbar;
}

// CSS custom properties
:root {
  // Background
  --bg-0: #{$bg-0};
  --bg-1: #{$bg-1};
  --bg-2: #{$bg-2};
  --bg-3: #{$bg-3};

  // Border
  --border-subtle: #{$border-subtle};
  --border: #{$border};
  --border-strong: #{$border-strong};

  // Text
  --text-0: #{$text-0};
  --text-1: #{$text-1};
  --text-2: #{$text-2};

  // Accent
  --accent: #{$accent};
  --accent-dim: #{$accent-dim};
  --accent-text: #{$accent-text};

  // Semantic
  --success: #{$success};
  --error: #{$error};
  --warning: #{$warning};

  // Border radius
  --radius-sm: #{$radius-sm};
  --radius: #{$radius};
  --radius-md: #{$radius-md};

  // Shadows
  --shadow-sm: #{$shadow-sm};
  --shadow: #{$shadow};
  --shadow-lg: #{$shadow-lg};
}

// Body
body {
  font-family: $font-family-base;
  background: var(--bg-0);
  color: var(--text-0);
  font-size: $font-size-lg;
  line-height: $line-height-relaxed;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

// Focus styles
:focus-visible {
  @include focus-outline;
}

// Selection
::selection {
  background: $accent-dim;
  color: $accent-text;
}

// Links
a {
  color: $accent-text;
  text-decoration: none;

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

// Code
code {
  padding: 1px 5px;
  border-radius: $radius-sm;
  background: $bg-0;
  color: $accent-text;
  font-family: $font-family-mono;
  font-size: $font-size-base;
}

// Lists
ul {
  list-style: none;
  padding: 0;

  li {
    padding: 3px 0;
    font-size: $font-size-md;
    color: $text-1;
  }
}

// Utility text
.text-muted {
  color: $text-1;
}

.text-sm {
  font-size: $font-size-base;
}

.mono {
  font-family: $font-family-mono;
  font-size: $font-size-md;
}

// Utility layout
.flex-row {
  @include flex(row, flex-start, center, $space-4);
}

.flex-between {
  @include flex-between;
}

.mb-16 {
  margin-bottom: $space-8;
}

.mb-8 {
  margin-bottom: $space-6;
}

// Animations
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes skeleton-pulse {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.6;
  }
}

@keyframes indeterminate {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}