@use "lib/viewport";

.fc {
  padding-bottom: 5px;
}

.fc-button,
.fc-button-active:focus {
  box-shadow: none !important;
}

.fc-button:focus {
  background: var(--d-button-default-bg-color--hover) !important;
  color: var(--d-button-default-text-color--hover) !important;
}

.fc-button-active {
  color: var(--d-button-primary-text-color) !important;
}

.fc-button-active:focus {
  background: var(--d-button-primary-bg-color--hover) !important;
  color: var(--d-button-primary-text-color--hover) !important;
}

.fc-col-header-cell {
  &.fc-day {
    a {
      color: var(--primary);
      text-transform: uppercase;
      font-size: var(--font-down-2);
    }
  }
}

.fc-daygrid-day-frame {
  .fc-daygrid-day-top {
    justify-content: center;

    .fc-daygrid-day-number {
      font-size: var(--font-down-2);
      color: var(--primary);
    }
  }
}

.fc-header-toolbar {
  .fc-button,
  .fc-toolbar-title {
    font-size: var(--font-down-1) !important;
  }
}

.fc-event-past {
  opacity: 0.3;
}

.fc-dayGridMonth-view {
  .fc-event-time {
    overflow: visible !important;
  }

  @include viewport.until(md) {
    .fc-event-time {
      display: none;
    }
  }
}

#upcoming-events-calendar {
  height: 100%;
}

@include viewport.until(md) {
  .fc-header-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .fc-toolbar-chunk {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .post-calendar {
    .fc-toolbar-chunk:nth-child(3) {
      .fc-button-group {
        flex-grow: 1;
      }
    }
  }
}
