.o-expander > hr {
  margin: 0;
}

.o-expander__summary {
  display: flex;
  padding: 1.2rem;
  gap: 0.5rem;
  align-items: center;
  transition: background 0.3s ease;

  &:not(.o-expander__summary--booking) {
    font-weight: 700;
  }

  &:hover,
  &:focus {
    .o-expander__summary-text {
      text-decoration: underline;
    }

    border-radius: var(--border-radius-m);
    background: rgba($link-hovered, 0.15);
  }

  &--booking {
    &:hover,
    &:focus {
      .o-booking__title-text {
        text-decoration: underline;
      }
    }
  }
}

.details-screen[open] > .o-expander__summary {
  &:hover,
  &:focus {
    border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
  }
}

.o-expander__content {
  padding: 1.2rem;
}

.details-print {
  display: none;
}

details {
  position: relative;
  background-color: var(--bg-neutral);
  border-radius: var(--border-radius-m);
  margin-bottom: 1.2rem;
  border: var(--border);

  table {
    width: 100%;
    margin-left: 0;
  }
}

details > summary {
  list-style-type: none;
}

.details-screen > .o-expander__summary {
  padding-right: 3.2rem;
}

details > div {
  overflow-x: auto;
}

details > summary::-webkit-details-marker {
  display: none;
}

.details-screen > .o-expander__summary::before {
  content: "keyboard_arrow_down";
  position: absolute;
  right: 1.2rem;
  font-size: 2.4rem;
  align-self: center;
  @extend .material-symbols-rounded;
}

.details-screen[open] > .o-expander__summary::before {
  content: "keyboard_arrow_up";
  font-size: 2.4rem;
  @extend .material-symbols-rounded;
}

details[open] > .o-expander__summary:not(.o-expander__summary--booking) {
  font-weight: 700;
}

@media print {
  .details-screen {
    display: none;
  }

  .details-print {
    border: 0.2rem solid #bbb;
    page-break-inside: avoid;
    display: block;
  }
}
