.shifts-calendar__day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shifts-calendar__shift {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: var(--pure-white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 8px;
  transition: all 0.1s ease-in-out;

  &::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    top: 8px;
    right: 8px;
    background-color: var(--gray-500);
    border-radius: 50%;
  }

  &:hover {
    box-shadow: 0px 1px 5px 1px var(--gray-200);
  }
}

.shifts-calendar__shift--active {
  background-color: var(--theme-tenth-opacity-color);
  border: 1px solid var(--theme-tenth-opacity-color);
}

.shifts-calendar__shift-title {
  font-weight: var(--font-weight-bold);
}

.shifts-calendar__shift-detail {
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
}

/* Booking status styling on shifts calendar */
.shifts-calendar__shift--booked,
.shifts-calendar__shift--worked {
  &::before {
    background-color: var(--success-light);
  }
}

.shifts-calendar__shift--requested {
  &::before {
    background-color: var(--yellow);
  }
}

.shifts-calendar__shift--rejected,
.shifts-calendar__shift--cancelled,
.shifts-calendar__shift--missed {
  &::before {
    background-color: var(--danger);
  }
}

.shifts-calendar__shift--offer {
  &::before {
    background-color: var(--blue);
  }
}