.status-calendar {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.status-calendar__container {
  width: 100%;
}

.status-calendar__container .calendar-heading {
  margin-bottom: 10px;
}

.status-calendar__container .calendar-heading nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-calendar__container .calendar-heading a {
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.calendar-heading__month-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xtight);
  color: var(--text-primary);
  text-transform: capitalize;
}

.status-calendar__container .table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 8.5px;
}

.status-calendar__container .abbr-day-names {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-xtight);
  color: var(--text-primary);
  text-transform: capitalize;
}

.status-calendar__container .day {
  border-radius: 8px;
}

.status-calendar__container .prev-month,
.status-calendar__container .next-month {
  visibility: hidden;
}

.status-calendar__container.has-selected .status-calendar__day:not(.selected) {
  opacity: 0.3;
}

.status-calendar__day {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--gray-100);
  color: var(--gray-500);

  border: var(--border-width-thin) solid var(--gray-100);
  border-radius: 8px;

  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  width: 100%;
  min-width: 48px;
  height: 40px;

  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.status-calendar__day:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-calendar__day.selected {
  opacity: 1 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* Start - Status colors */

.status-calendar__day--completed  {
  background-color: var(--success-100);
  color: var(--success-900);
  border: var(--border-width-thin) solid var(--success-600);
}

.status-calendar__day--open {
  background-color: var(--blue-100);
  color: var(--blue-900);
  border: var(--border-width-thin) solid var(--blue-600);
}

.status-calendar__day--pending {
  background-color: var(--warning-100);
  color: var(--warning-900);
  border: var(--border-width-thin) solid var(--warning-600);
}

/* End - Status colors */

@media screen and (max-width: 768px) {
  .status-calendar__container .table {
    border-spacing: 4px;
  }

  .status-calendar__day {
    font-size: var(--font-size-sm);
    min-width: 32px;
    height: 32px;
  }
}

@media screen and (max-width: 480px) {
  .status-calendar__container .table {
    border-spacing: 2px;
    border-spacing: 12px;
  }

  .status-calendar__day {
    font-size: var(--font-size-xs);
    min-width: 28px;
    height: 28px;
  }
}