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

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

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

// ─── Pfeile ──────────────────────────────────────────────────────────────────
.week-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: $color-white;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: background $transition-fast;

  &:hover { background: rgba(255, 255, 255, 0.2); }

  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;

  &:hover:not(.week-nav__day--active) {
    background: rgba(255, 255, 255, 0.15);
  }

  &--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: $color-white;
  line-height: 1.2;
}

.week-nav__day-date {
  font-size: $font-size-xs;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.3;
}

// ─── Kalender-Icon ───────────────────────────────────────────────────────────
.week-nav__cal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: $radius-md;
  background: rgba(255, 255, 255, 0.2);
  color: $color-white;
  cursor: pointer;
  border: none;
  margin-left: $space-1;
  flex-shrink: 0;
  transition: background $transition-fast;

  svg { width: 16px; height: 16px; pointer-events: none; }

  &:hover,
  &--active { background: rgba(255, 255, 255, 0.35); }
}