@use "../../../styles/abstracts/mixins" as *;

/* =========================================
   COLORS (YOUR SYSTEM)
========================================= */

$primary: #5e3817;
$primary-2: #7a4b20;

$primary-soft: rgba(122, 75, 32, 0.08);
$primary-soft-strong: rgba(122, 75, 32, 0.15);

$text-dark: #1a1a1a;
$text-light: #6b6b6b;

$border: rgba(0, 0, 0, 0.06);

/* =========================================
   ROOT
========================================= */

.todos {
  @include dashPageComponent;
  padding: 1rem 1rem;
}

/* =========================================
   HEADER
========================================= */

.header {
  margin-bottom: 1rem;
}

/* =========================================
   GRID
========================================= */

.grid {
  display: flex;
  gap: 1.8rem;
  overflow-x: auto;

  padding-bottom: 0.4rem;

  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    display: none;
  }

  @media (max-width: 1000px) {
    gap: 1.4rem;
  }
}

/* =========================================
   ITEM
========================================= */

.item {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  min-width: 70px;

  transition: all 0.2s ease;

  &:active {
    transform: scale(0.95);
  }
}

/* =========================================
   ICON (PREMIUM SYSTEM)
========================================= */

.icon {
  width: 46px;
  height: 46px;

  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: $primary-soft;

  color: $primary;

  font-size: 1.2rem;

  position: relative;
  transition: all 0.25s ease;

  /* 🔥 soft highlight layer */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0)
    );

    opacity: 0.4;
    pointer-events: none;
  }

  /* hover effect */
  .item:hover & {
    background: $primary-soft-strong;
    transform: translateY(-3px);
  }
}

/* =========================================
   LABEL
========================================= */

.item span {
  margin-top: 0.45rem;

  font-size: 0.78rem;
  font-weight: 500;

  color: $text-dark;

  text-align: center;

  transition: all 0.2s ease;

  .item:hover & {
    color: $primary;
  }
}