.calendar {
  scroll-behavior: smooth;
}

.calendar:after {
  content: "";
  display: table;
  clear: both;
}

.calendar_title {
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
}

.calendar_workshops {
  margin: 0 -0.5rem;
}

.calendar_workshops:after {
  content: "";
  display: table;
  clear: both;
}

.calendar_workshop {
  float: left;
  width: calc(33.333% - 1rem);
  margin: 0 0.5rem 1rem;
}

.calendar_workshop:not(:hover) {
  background: hsl(0, 0%, 50%) !important;
}

.calendar_events {
  margin: 0 -0.5rem 3rem;
}

.calendar_events:after {
  content: "";
  display: table;
  clear: both;
}

.event {
  float: left;
  display: flex;
  width: 100%;
  height: 9rem;
  margin-bottom: 1rem;
}

.event:after {
  content: "";
  display: table;
  clear: both;
}

.event_day {
  width: 9rem;
  margin: 0 0.5rem;
  background-color: hsl(0, 0%, 50%);
}

.event--past .event_day {
  background-color: hsl(0, 0%, 75%);
}

.event_day--empty {
  visibility: hidden;
}

.event_day .content-box_title,
.event_spots .content-box_title {
  width: 100%;
  margin-top: 0.75rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  line-height: 1;
  text-align: center;
  text-transform: none;
}

.event_infos {
  flex: 1;
  margin: 0 0.5rem;
  background-color: hsl(0, 0%, 50%);
}

.event_infos:not(:hover) {
  background: hsl(0, 0%, 50%) !important;
}

.event--past .event_infos {
  background-color: hsl(0, 0%, 75%);
}

.event--past .event_infos:not(:hover) {
  background-color: hsl(0, 0%, 75%) !important;
}

.event_infos .content-box_title {
  width: 100%;
  max-height: 5.4rem;
  overflow: hidden;
  margin-top: 0.25rem;
  padding: 1rem 1.2rem 0;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: 'TO Leaf';
  font-size: 2.2rem;
  line-height: 1;
  text-align: left;
  text-transform: none;
}

.event_infos .content-box_top-left {
  width: calc(100% - 10.4rem);
}

.event_infos .content-box_top-right {
  width: 8rem;
}

.event_details {
  width: calc(33.333% - 11rem);
  min-width: 20rem;
  margin: 0 0.5rem;
  background-color: hsl(0, 0%, 50%);
}

.event--past .event_details {
  background-color: hsl(0, 0%, 75%);
}

.event_tickets,
.event_spots {
  width: 9rem;
  margin: 0 0.5rem;
  background-color: hsl(0, 0%, 50%);
}

.event--past .event_tickets,
.event--past .event_spots {
  background-color: hsl(0, 0%, 75%);
}

.event_tickets {
  cursor: pointer;
}

.event_tickets:not(.event_tickets--private):hover {
  background-color: black;
}

.event_tickets--free,
.event_tickets--complete,
.event_tickets--inactive {
  pointer-events: none;
  cursor: default;
}

.event_tickets .content-box_title,
.event_spots--complete .content-box_title {
  width: 4rem;
  height: 4rem;
  margin-top: 0.75rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('../assets/go.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4.2rem;
}

.event_tickets--complete .content-box_title,
.event_spots--complete .content-box_title {
  background-image: url('../assets/close.svg');
}

.calendar-nav {
  flex: 0 0 auto;
  width: 100%;
  height: 8rem;
  position: relative;
  color: white;
  font-feature-settings: 'pnum' on;
  font-size: 2rem;
  line-height: 4rem;
  text-align: center;
}

.calendar-nav_prev,
.calendar-nav_next {
  width: 50%;
  height: 4rem;
  position: absolute;
  top: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: 2rem;
  cursor: pointer;
}

.calendar-nav_prev {
  left: 0;
  background-position: 1rem center;
  background-image: url('../assets/back.svg');
}

.calendar-nav_next {
  right: 0;
  background-position: calc(100% - 1rem) center;
  background-image: url('../assets/go.svg');
}

.calendar-nav_container {
  width: 100%;
  height: 100%;
  position: absolute;
}

.calendar-nav_month {
  height: 4rem;
  position: relative;
  background-color: hsl(0, 0%, 50%);
}

.calendar-nav_days {
  display: flex;
  height: 4rem;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: black;
}

.calendar-nav_day {
  flex: 1;
  min-width: 4rem;
  height: 100%;
  cursor: default;
}

.calendar-nav_day--active {
  position: relative;
  background-image: url('../assets/active.svg');
  background-position: center 1rem;
  background-repeat: no-repeat;
  background-size: 2rem;
  color: transparent;
  cursor: pointer;
}

.calendar-nav_day--active:hover {
  background-image: none;
  color: white;
}

@media (max-width: 768px) {
  .event {
    display: block;
    height: auto;
    margin-bottom: 2rem;
  }

  .event_day--empty {
    visibility: visible;
  }

  .event_day,
  .event_tickets,
  .event_infos,
  .event_details,
  .event_spots {
    float: left;
  }

  .event_infos,
  .event_details {
    width: calc(100% - 11rem);
  }

  .event_details,
  .event_tickets,
  .event_spots {
    margin-top: 1rem;
  }

  .event_details {
    min-width: 0;
  }

  .calendar_workshop {
    width: calc(100% - 1rem);
  }
}