@import '../../../../styles/app';

/*
 * Vue calendar
 */

.lb-calendar {
  display: block;
  width: 100%;
  padding: 1rem;
}

.lb-calendar .vc-container {
  border: none;
  font-family: $font-family-base;
  color: $text-color;
  background: transparent;
  border-radius: 0;
  width: 100%;

  // v-calendar v3 dark theme overrides
  &.vc-dark {
    --vc-bg: transparent;
    --vc-border: transparent;
    --vc-color: #{$text-color};
    --vc-header-arrow-color: #{$text-color};
    --vc-header-title-color: #{$text-color};
    --vc-weekday-color: #{$text-muted};
    --vc-day-content-color: #{$text-color};
    --vc-nav-hover-bg: rgba(255, 255, 255, 0.1);
    --vc-accent-50: #{theme-color("primary")};
    --vc-accent-100: #{theme-color("primary")};
    --vc-accent-200: #{theme-color("primary")};
    --vc-accent-300: #{theme-color("primary")};
    --vc-accent-400: #{theme-color("primary")};
    --vc-accent-500: #{theme-color("primary")};
    --vc-accent-600: #{theme-color("primary")};
    --vc-accent-700: #{theme-color("primary")};
    --vc-accent-800: #{theme-color("primary")};
    --vc-accent-900: #{theme-color("primary")};
  }

  .vc-header {
    padding: 0;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .vc-weeks {
    padding: 0;
  }

  // Navigation arrows
  .vc-arrow {
    background: transparent;
    border: none;
    color: $text-color;

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

    svg {
      stroke: $text-color;
    }
  }

  // Month/Year title button
  .vc-title {
    color: $text-color;
    font-weight: $font-weight-normal;
    background: transparent;
    border: none;

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

  .vc-weekday {
    font-weight: $font-weight-normal;
    color: $text-muted;
  }

  .vc-day-content {
    color: $text-color;

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

  // Highlight styles
  .vc-highlight {
    background-color: rgba(theme-color("primary"), 0.3);
    border-radius: 50%;
  }

  // Dots for events - positioned above the day number
  .vc-dots {
    margin-top: 2px;
  }

  .vc-dot {
    width: 6px;
    height: 6px;

    &.vc-blue {
      background-color: theme-color("primary");
    }

    &.vc-green {
      background-color: theme-color("success");
    }

    &.vc-red {
      background-color: theme-color("danger");
    }

    &.vc-orange {
      background-color: theme-color("warning");
    }
  }

  .vc-day-popover-row-content {
    display: block;

    a {
      color: $white;

      &:hover {
        color: darken($white, 20%);
      }
    }
  }
}
