timetracking/httpdocs/assets/styles/components/_week-nav.scss

@use '../atoms/variables' as *;
@use '../atoms/mixins' as *;

// ─── Wrapper ─────────────────────────────────────────────────────────────────
.week-nav {
  display: flex;
  align-items: center;
  gap: $space-1;
  background: var(--header-overlay);
  border-radius: $radius-pill;
  padding: $space-1 $space-2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  @include tablet {
    width: 100%;
    justify-content: center;
  }
}

// ─── Pfeile ──────────────────────────────────────────────────────────────────
.week-nav__arrow {
  @include icon-btn;
  color: var(--header-text);
  text-decoration: none;

  &:hover { background: var(--header-overlay); }

  svg { width: 8px; height: 14px; }
}

// ─── Tage-Container (Slide-Animation) ────────────────────────────────────────
.week-nav__days {
  display: flex;
  align-items: center;
  gap: $space-1;
  overflow: hidden;
  position: relative;

  &.slide-out-left  { animation: slideOutLeft  0.18s ease forwards; }
  &.slide-out-right { animation: slideOutRight 0.18s ease forwards; }
  &.slide-in-right  { animation: slideInRight  0.18s ease forwards; }
  &.slide-in-left   { animation: slideInLeft   0.18s ease forwards; }
}

@keyframes slideOutLeft  { to   { opacity: 0; transform: translateX(-24px); } }
@keyframes slideOutRight { to   { opacity: 0; transform: translateX(24px);  } }
@keyframes slideInRight  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInLeft   { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }

// ─── Einzelner Tag ───────────────────────────────────────────────────────────
.week-nav__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $space-2 $space-3;
  border-radius: $radius-md;
  cursor: pointer;
  text-decoration: none;
  width: 64px;
  flex-shrink: 0;
  flex-grow: 0;
  transition: background $transition-fast;
  user-select: none;

  @include tablet {
    width: auto;
    flex: 1;
    min-width: 0;
  }

  &:hover:not(.week-nav__day--active) {
    background: var(--header-overlay);
  }

  &--active {
    background: $color-white;

    .week-nav__day-name,
    .week-nav__day-date { color: $color-text-dark; }
  }

  &--today:not(&--active) {
    .week-nav__day-name {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }
}

.week-nav__day-name {
  font-size: $font-size-sm;
  font-weight: $font-weight-bold;
  color: var(--header-text);
  line-height: 1.2;
}

.week-nav__day-date {
  font-size: $font-size-xs;
  color: var(--header-text-muted);
  line-height: 1.3;
}

// ─── Kalender-Icon ───────────────────────────────────────────────────────────
.week-nav__cal {
  @include icon-btn(34px, $radius-md);
  background: var(--header-overlay);
  color: var(--header-text);
  margin-left: $space-1;

  svg { width: 16px; height: 16px; }

  &:hover,
  &--active { background: var(--header-overlay); }
}