/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * Styles are organized following CUBE CSS methodology:
 * - Global: CSS reset and base styles
 * - Composition: Layout and structural styles
 * - Utilities: Single-purpose utility classes
 * - Blocks: Component-specific styles
 * - Exceptions: Contextual modifications
 */

/* Global: CSS reset and base styles */
@import "global/reset.css";

:root {
  --error-outline: 0.25rem solid red;
}

/* Base styles */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: var(--step-0);
}

/* Utilities: Single-purpose utility classes */
@import "utilities/spacing.css";
@import "utilities/typography.css";
@import "utilities/colors.css";
@import "utilities/visually-hidden.css";

/* Composition: Layout and structural styles */
@import "compositions/sidebar.css";
@import "compositions/cluster.css";
@import "compositions/switcher.css";

/* Blocks: Component-specific styles */
/* @import "blocks/sidebar-nav.css"; */
/* @import "blocks/link-card.css"; */
/* @import "blocks/forms.css"; */

.dashboard__nav ul {
  --treshold: 230px;
  --space: var(--space-3xs);
  padding: 0;
}

.dashboard__nav .pill {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 100px;
  border-radius: 16px;
  color: white;
  text-decoration: none;
  font-weight: 500;

  padding: var(--space-2xs);
}

.dashboard__nav .pill:hover {
  transform: translateX(2px);
}

.dashboard__nav .pill:focus {
  outline: 3px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.pill--active {
  position: relative;
  transform: translateX(2px);
}

.pill--active::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.pill__number {
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0.9;
}

.pill__label {
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pill--all {
  background-color: var(--color-all);
}

.pill--all:hover {
  opacity: 1;
}

.pill--inbox {
  background-color: var(--color-inbox);
}

.pill--reading-queue {
  background-color: var(--color-reading-queue);
}

.pill--archive {
  background-color: var(--color-archive);
}