.day {
  --size: 4.4rem;

  width: var(--size);
  height: var(--size);
  border-radius: 14px;
  display: flex;
  background-color: var(--op-color-transparent-6);
  align-items: center;
  justify-content: center;
  color: var(--op-color-neutral-minus-five);
  position: relative;
  align-self: center;
  justify-self: center;
  font-family: "Jersey 25";
  font-size: var(--op-font-large);
  overflow: hidden;

  &:hover {
    background-color: var(--op-color-primary-plus-six);
    border: dashed var(--op-border-width-large) var(--op-color-primary-plus-two) !important;
  }

  &.day--current {
    border: dashed var(--op-border-width-large) var(--op-color-primary-plus-six);
    background-image: linear-gradient(to right bottom, #d20000, #cf0057, #a62f8d, #6651a2, #245e96);
    color: var(--op-color-neutral-plus-max);
  }

  &.day--future {
    color: var(--op-color-neutral-plus-one);
  }

  &.day--preview {
    background-color: var(--op-color-neutral-plus-seven);
  }

  .day__background-image {
    position: absolute;
    width: var(--size);
    height: var(--size);
    z-index: 1;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  .day__number--on-image {
    color: var(--op-color-neutral-plus-max);
  }

  .day__number {
    z-index: 2;
  }
}

.day__wrapper {
  position: relative;
  padding: 3px;
  width: 100%;
  max-width: 6rem;

  &.day__wrapper--no-entry {
    .day:not(.day--future, .day--current) {
      border: var(--op-border-width-large) dotted orange;
    }
  }

  &.day__wrapper--spotlight {
    .day {
      border: var(--op-border-width-large) solid var(--op-color-alerts-warning-plus-three);
      filter: sepia(60%);
    }
  }
  
  &.day__wrapper--highlighted {
    .day {
      border: var(--op-border-width-large) solid var(--op-color-alerts-danger-plus-three);
      filter: sepia(60%);
      transform: scale(1.1);
      box-shadow: 0px 4px 40px 2px var(--op-color-primary-base);
    }
  }

  &.day__wrapper--grayscaled {
    opacity: 0.5;
    filter: grayscale(100%);
    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
  }
}

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

  .day {
    --size: calc(var(--op-space-4x-large) + var(--op-space-large));
    font-size: var(--op-font-3x-large);
  }
}

.day-badges {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  left: 0;
  top: -2px;
  z-index: 5;
}

.day-badges--during-event {
  justify-content: flex-end;
  right: 0;
  left: unset;
}

.day-badge-indicator {
  background-color: var(--badge-fill-color);
  color: var(--badge-color);
  font-size: var(--op-font-small);
  border-radius: 50%;
  padding: 1px;
  align-items: center;
  width: 14px;
  height: 14px;
}

.day-note-indicator {
  position: absolute;
  background-color: var(--op-color-primary-plus-six);
  border-radius: 50%;
  font-size: var(--op-font-small);
  padding: 1px;
  z-index: 4;
  left: -2px;
  top: -2px;
}

.day-long-note-indicator {
  background-color: var(--op-color-alerts-notice-plus-six);
  left: 16px;
}