.calendar {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  width: 100%;
}

.calendar__step-btn {
  position: absolute;
  background: var(--neutral-200);
}

.calendar__step-btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-47.5%, -50%);
  width: 2rem;
}

.calendar__step-btn:disabled {
  opacity: 0.4;
}

.calendar__step-btn:first-of-type {
  left: 0;
  transform: rotate(180deg) !important;
}

.calendar__step-btn:last-of-type {
  right: 0;
}

.calendar__title {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.calendar__day-names {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  margin-top: 2rem;
}

.calendar__day-names p {
  font-size: 1rem;
  text-align: center;
  font-weight: 500;
}

.calendar__grid {
  display: grid;
  gap: 0.125rem;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
}

.calendar__day-btn {
  font-size: 1rem;
  font-weight: 600;
  background: var(--neutral-50);
  color: var(--neutral-900);
  padding: 0.5rem 0;
  width: 100%;
  margin: auto;
  transition: 0.2s;
  border: 2px solid var(--neutral-200);
}

.calendar__day-btn.prev,
.calendar__day-btn.next {
  background: var(--neutral-100);
  border: 2px solid transparent;
}

.calendar__day-btn.selected {
  background: var(--blue-600);
  color: var(--neutral-100);
  border: 2px solid var(--blue-800);
}

.calendar__day-btn:disabled {
  background: var(--neutral-100);
  color: var(--neutral-300);
  border: 2px solid transparent;
  font-weight: 500;
}

.calendar__day-btn:not(:disabled):hover {
  border: 2px solid var(--neutral-600);
}

.time__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
}

.time__row button {
  font-size: 1rem;
  font-weight: 600;
  background: var(--neutral-50);
  color: var(--neutral-900);
  padding: 0.5rem 0;
  width: 75px;
  transition: 0.2s;
  border: 2px solid var(--neutral-200);
}

.time__row button:disabled {
  background: var(--neutral-100);
  color: var(--neutral-300);
}

.time__row button:not(:disabled):hover {
  border: 2px solid var(--neutral-600);
}

.time__row button.selected {
  background: var(--blue-600);
  color: var(--neutral-100);
  border: 2px solid var(--blue-800);
}