#calendar {
  width: 20em;
  height: 20em;
}

.calendar__wrapper {
}

.calendar__wrapper--horizontal {
  display: flex;
}

.calendar__wrapper--vertical {
  max-height: 400px;
  overflow-y: scroll;
}

.calendar__weekday {
  margin-right: 3px;
}

.calendar__header {
  display: flex;
}

.calendar__arrow-wrapper {
  display: flex;
  justify-content: space-between;
}

.calendar__arrow {
  &--left {
    cursor: pointer;
  }

  &--right {
    cursor: pointer;
  }
}

.calendar__cell {
  cursor: pointer;
}

.calendar__cell--past,
.calendar__cell--disabled {
  cursor: default;
  text-decoration: line-through;
}

.calendar__cell--checkin {
  background: yellow;
  &--mono {
    background: orange;
  }
}

.calendar__cell--checkout {
  background: blueviolet;
}

.calendar__cell--range {
  background: salmon;
}

.calendar__cell--today {
  border: 1px solid black;
}

.left-arrow-icon {
  height: 20px;
  width: 20px;
  background-color: red;
}

.right-arrow-icon {
  height: 20px;
  width: 20px;
  background-color: red;
}