@use "src/styles/mixin.scss";

$today-highlight-bg: transparent;
@import 'react-big-calendar/lib/sass/styles';
@import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD

.rbc-calendar {
  font-size: 12px;
}

.rbc-button-link {
  @apply rounded-full w-[20px] h-[20px] my-1.5 cursor-default;
}


.rbc-date-cell, .rbc-header {
  min-width: 97px;
  font-size: 14px;
}

.rbc-date-cell.rbc-now {

  color: var(--content-on-fill);

  .rbc-button-link {
    background-color: var(--function-error);
  }
}

.rbc-calendar {
  height: fit-content;
  @apply w-full overflow-x-scroll;
  @include mixin.scrollbar-style;

}

.rbc-month-view {
  border: none;
  height: fit-content;

  .rbc-month-row {
    border: 1px solid var(--line-divider);
    border-top: none;
    min-width: 1200px;
    @apply max-sm:w-[600vw];
  }


}


.rbc-day-bg + .rbc-day-bg {
  border-left-color: var(--line-divider);
}

.rbc-month-header {
  height: 40px;
  position: sticky;
  top: 0;
  background: var(--bg-body);
  z-index: 50;
  min-width: 1200px;

  @apply max-sm:w-[600vw];

  .rbc-header {
    border: none;
    border-bottom: 1px solid var(--line-divider);
    @apply flex items-end py-2 justify-center font-normal text-text-caption bg-bg-body;

  }
}

html[thumbnail="true"] {
  .rbc-month-row, .rbc-month-header {
    width: 100% !important;
    min-width: 100% !important;
  }
}

.rbc-month-row .rbc-row-bg {
  .rbc-off-range-bg {
    background-color: transparent;
    color: var(--text-caption);
  }

  .rbc-day-bg.day-0, .rbc-day-bg.day-6 {
    background-color: var(--fill-list-active);
  }
}

.rbc-month-row {
  display: inline-table !important;
  flex: 0 0 0 !important;
  min-height: 97px !important;
  height: fit-content;
  table-layout: fixed;
  width: 100%;
}

.event-properties {
  .property-label {
    @apply text-text-caption;
  }
}