:root {
  --day-size: 5.2rem;

  @media only screen and (max-width: 500px) {
    --day-size: 4.4rem;
  }
}

.day {
  width: var(--day-size);
  height: var(--day-size);
  border-radius: var(--op-radius-medium);
  display: flex;
  background-color: var(--op-color-neutral-plus-six);
  align-items: flex-start;
  justify-content: center;
  color: var(--op-color-neutral-minus-five);
  position: relative;
  font-size: var(--op-font-large);
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 0;

  &:hover {
    background-color: var(--op-color-primary-plus-five);
  }

  &:focus {
    box-shadow: var(--button-shadow-active), 0 0 0 2px var(--op-color-primary-base);
    background-color: var(--op-color-primary-plus-five);
  }

  &.day--current:not(:focus) {
    box-shadow: 0 0 0 2px var(--op-color-secondary-base);
    background-color: var(--op-color-secondary-plus-six);
    color: var(--op-color-neutral-plus-max);
  }

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

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

  .day__event-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .day__background-image {
    position: absolute;
    width: var(--day-size);
    height: var(--day-size);

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      transition: transform 0.2s ease, filter 0.2s ease;
    }
  }

  &:has(.day__event-svg) .day__background-image img {
    filter: grayscale(1);
  }

  &:has(.day__event-svg):hover .day__background-image img {
    filter: grayscale(0);
  }

  &:has(.day__background-image):hover {
    background-color: unset;
    box-shadow: 0 0 0 2px var(--op-color-primary-base);

    .day__background-image img {
      transform: scale(1.08);
    }
  }

  .day__number {
    padding-top: var(--op-space-small);
    color: var(--op-color-neutral-on-plus-max);
    z-index: 2;
    font-weight: var(--op-font-weight-semi-bold);

    &.day__number--on-image {
      color: var(--op-color-white);
    }
  }

  &.day--no-badges {
    align-items: center;

    .day__number {
      padding-top: 0;
    }
  }
}


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

  &.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%);
      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 {
    --day-size: calc(var(--op-space-4x-large) + var(--op-space-large));
    font-size: var(--op-font-3x-large);
  }
}

.day-badges {
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  left: 0;
  bottom: 0;
  width: var(--day-size);
  justify-content: center;
  border-bottom-left-radius: var(--op-radius-medium);
  border-bottom-right-radius: var(--op-radius-medium);
}

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

.day-badge-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  background-color: var(--badge-fill-color);
  color: var(--badge-color);
  font-size: var(--op-font-x-small);
  opacity: 0.94;

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

  &:hover {
    cursor: pointer;
    background-color: color-mix(in srgb, var(--badge-color) 10%, var(--badge-fill-color));
  }
}