.attachment__ical {
  display: block;

  @media (min-width: 60em) {
    margin-right: -14rem;
    margin-left: -12rem;
  }
}

.attachment__ical-wrapper {
  --color-bg--sheet: var(--color-bg--secondary-glint-opaque);
  --sheet-padding: 0 !important;
  border-radius: 1rem !important;
  border: 1px solid var(--color-border--light);
}

.attachment__ical-layout {
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  @media (min-width: 60em) {
    flex-direction: row;
  }
}

.attachment__ical-content {
  display: flex;
  flex-direction: column;
  flex-grow: 4;
  padding: 2em 2em var(--base-space);
  gap: var(--half-space);

  @media (max-width: 39.95em) {
    padding: var(--base-space);
  }
}

.attachment__ical-cancel {
  .event--pending, .hdg {
    text-decoration: line-through;
  }
}

.attachment__ical-minical {
  display: flex;
  flex-direction: column;
  background: var(--color-bg--main);
  border: 3px solid var(--color-secondary);
  border-radius: 0.5rem;
  width: 4em;
  height: 4em;
  min-width: 4em;
  align-items: stretch;
  justify-content: space-between;
  text-align: center;

  @media (max-width: 39.95em) {
    display: none;
  }
}

.attachment__ical-minical-month {
  background-color: var(--color-secondary);
  color: var(--color-txt--reversed);
  font-size: var(--font-size-x-small);
  font-weight: bold;
  text-transform: uppercase;
  padding: 2px 0;
}

.attachment__ical-minical-day {
  font-size: var(--font-size-large);
}

.attachment__ical-minical-weekday {
  font-size: var(--font-size-xxx-small);
  color: var(--color-txt--subtle);
  text-transform: uppercase;
  padding: 0 0 4px 0;
}

.attachment__ical-details {
  display: flex;
  gap: var(--half-space);
  overflow-wrap: anywhere;
  white-space: normal;
}

.attachment__ical-sidebar {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  padding: var(--base-space);
  background-color: var(--color-bg--secondary-glint);

  @media (min-width: 60em) {
    padding: var(--base-space);
    justify-content: center;
    align-items: center;
    border-left: 1px solid var(--color-border--light);
  }

  @media (max-width: 39.95em) {
    padding: var(--base-space) 2em;
    flex-direction: row;
  }
}

.attachment__ical-form {
  display: flex;
  flex-direction: column;
  row-gap: var(--half-space);
  width: 20rem;
}

.attachment__ical-form--selected-reply {
  cursor: default !important;
}

.attachment__ical-form-note {
  margin: 0;

  [data-color-scheme="dark"] & { color: var(--color-txt); }

  @media (min-width: 60em) {
    text-align: center;
    font-size: var(--font-size-small);
  }
}

.attachment__ical-form-rsvp {
  display: flex;
  gap: var(--base-space);
  text-align: center;
  font-size: var(--font-size-medium);

  @media (min-width: 60em) {
    gap: var(--half-space);
    flex-direction: column;
    font-size: var(--font-size-small);
  }
}

.attachment__ical-row {
  position: relative;
  max-width: 100%;
  padding: 0 0 0 1.4em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  .attachment__ical-row--attendees {
    -webkit-line-clamp: unset;
  }

  &::before { /* For icons */
    filter: var(--colorize-ink);
    content: "";
    width: 1em;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: 0 4px / 0.95em no-repeat;
  }
}
.attachment__ical-row--location::before { background-image: url("/assets/icons/location-a6812fe0.svg"); }
.attachment__ical-row--time::before { background-image: url("/assets/icons/time-clock-afb81a54.svg"); }
.attachment__ical-row--recurring::before { background-image: url("/assets/icons/refresh-6281fe84.svg"); }
.attachment__ical-row--organizer::before { background-image: url("/assets/icons/calendar-invites-d084ca93.svg"); }
.attachment__ical-row--attendees::before { background-image: url("/assets/icons/contacts-d3969e87.svg"); }

/* Day timeline */
.attachment__ical {
  .days-grid {
    height: auto;
    padding-top: var(--base-space);
    display: none;

    @media (min-width: 60em) {
      display: grid;
    }
  }

  .days-grid__events {
    height: 10em;
    margin-bottom: 0;
  }

  .days-grid__day {
    grid-template-rows: 1em auto;
    min-width: calc(max(94rem,840px)*(1 - (var(--night-start-slots) + var(--night-end-slots))/var(--day-slots)));
  }

  .days-grid__day[data-night-start],
  .days-grid__day[data-night-end],
  .days-grid__day[data-night-end][data-night-start] {
    min-width: calc(max(94rem,840px)*(1 - (var(--night-start-slots) + var(--night-end-slots))/var(--day-slots)))
  }

  /* hide first time column */
  .days-grid__time {
    &:first-child, &:nth-child(even) { display: none; }
  }

  .days-grid__spanned-events {
    .event--highlighted:last-child { margin-bottom: var(--half-space); }
  }

  .event--freetime,
  .days-grid__time-label {
    cursor: default;
  }

  .days-grid__time-label,
  .event--nighttime {
    background-color: var(--color-bg--secondary-glint-opaque) !important;
    border: 0;
  }

  .event--nighttime-expanded.grid-col-1::before,
  .event--nighttime:after {
    content: none;
  }

  .event--strikethrough {
    text-decoration: line-through;
  }

  .event--pending {
    background-color: var(--color-bg--main) !important;

    .event__wrapper {
      padding: var(--half-space) 0;
    }

    .event__label {
      color: var(--color-txt--subtle);
    }

    .event__title {
      border-radius: 0.4rem;
      padding: 0 0.125em;
      color: var(--color-txt--subtle);
    }
  }

  .event--arrow {
    &::before {
      filter: var(--colorize-orange);
      animation: wiggle 0.4s 1s both;
      content: "";
      height: 4.5em;
      background: url("/assets/calendar/event_invite_arrow-955b4e64.svg") center center no-repeat;
      position: absolute;
      top: -3em;
      background-size: 100% 100%;
      aspect-ratio: 1 / 2;
      z-index: 1;
    }
  }

  .event--spanned {
    overflow: visible;

    .event__wrapper {
      padding: 0;
    }

    &::before {
      top: -4.25em;
      left: 1.5em;
    }
  }
}

.import_ical {
  .days-grid__day, .days-grid__day[data-night-start], .days-grid__day[data-night-end], .days-grid__day[data-night-end][data-night-start] {
    min-width: calc(max(74rem,800px)*(1 - (var(--night-start-slots) + var(--night-end-slots))/var(--day-slots)));
  }

  .attachment__ical-content { padding: var(--base-space); }

  @media (min-width: 40em) {
    .attachment__ical { margin: var(--double-space); }
  }

  @media (min-width: 60em) {
    .attachment__ical-sidebar { width: 15rem; }
  }

}