.hidden {
  display: none !important;
}

.notifications {
  .hr-text {
    margin: 0;
  }

  &:not(.empty) {
    margin-bottom: 1.5em;
  }

  & > * {
    margin: 1rem 0;
  }
}

.notecard {
  &.note {
    --notice-color: var(--menu-color);
    --notecard-stripe-width: 0;
  }

  &.info {
    --notice-color: var(--b-color);
    --notecard-stripe-width: 0;
  }

  &.warning {
    --notice-color: var(--y-color);
  }

  &.critical {
    --notice-color: var(--r-color);
  }

  & > :first-child {
    padding: 0.5rem 1em;
    margin-bottom: 0;

    & > strong {
      color: inherit;
    }

    .severity {
      text-transform: uppercase;
      font-weight: 700;
      font-size: 0.75em;
      color: var(--notice-color);
      margin-right: 0.5em;
    }
  }

  & > :not(:first-child) {
    margin: 0.75rem 1rem;
  }

  h3 {
    font-size: inherit;
    font-weight: inherit;
  }

  footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;

    &:empty {
      display: none;
    }

    button,
    a[role="button"] {
      --blockquote-color: var(--notice-color);
    }
  }
}

.accordion {
  margin-bottom: 1rem;

  details {
    margin: 0;
    border-top: none;

    &:first-child {
      border-top: var(--border-width-header) solid
        var(--notecard-border-color, var(--border-color));
    }

    &:not([open]) {
      summary {
        border: none;
        background-color: var(--background-color);
      }
    }
  }
}

.bordered {
  border: var(--border-width) solid var(--border-color);
  border-top-width: var(--border-width-header);
  border-radius: var(--border-radius-block);

  padding: 0 1rem;
}

.empty {
  color: var(--menu-color);
  text-align: center;
}

.blur {
  color: var(--border-color);
}

footer.actions-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5em;
}

main nav a.back-button {
  .material-symbols-rounded {
    font-size: 1em;
    line-height: inherit;
    vertical-align: bottom;
  }
}

.actions-list[role="listbox"],
.expandable-form {
  & > button,
  & > [role="button"] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "icon title"
      "icon description";
    gap: 0.25em 1em;

    margin: 1em 0;
    padding: 1em;

    border: var(--border-width) solid var(--menu-color);
    border-radius: var(--border-radius-block);
    background: none;

    font-size: 1em; /* reset */
    text-align: left;

    span.material-symbols-rounded {
      grid-area: icon;
    }

    h3 {
      grid-area: title;
      font-size: inherit;
      font-weight: inherit;
      font-family: inherit;
      margin: 0;
    }

    p {
      grid-area: description;
      font-size: 0.9em;
      font-weight: 400;
      margin: 0;
    }

    &:hover {
      filter: brightness(1.2) contrast(0.8);
      background-color: rgba(from currentColor r g b / 0.1);
      text-decoration: none;
      cursor: pointer;
    }
  }
}

.r-color {
  --color: var(--r-color);
  --blockquote-color: var(--r-color);
  --blockquote-background-color: rgba(from var(--r-color) r g b / 0.1);
  --blockquote-border-color: var(--r-color);

  color: var(--color);
}

details.expandable-form {
  border: var(--border-width) solid var(--menu-color);
  border-radius: var(--border-radius-block);

  margin: 1.5rem 0;
  overflow: hidden;

  & > summary[role="button"] {
    border: none !important;
    margin: 0 !important;
  }

  &:hover summary[role="button"],
  &:focus-within summary[role="button"] {
    cursor: pointer;
    background-color: var(--blockquote-background-color);
  }
}

.copy-on-click.handled {
  &:not(a) {
    cursor: pointer;
    text-decoration: dashed underline;
  }

  transition: color var(--transition-duration) ease-in-out;
  &.copied {
    color: var(--g-color);
    transition: none;
  }
}

.hr-text {
  position: relative;
  font-size: 0.9em;

  .hr-line {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;

    z-index: -1;

    display: flex;
    flex-direction: row;
    align-items: center;

    hr {
      margin: 0;
      flex: 1;
      height: calc(2 * var(--border-width));
    }
  }

  .text {
    display: inline-block;
    color: var(--background-color);
    background-color: var(--menu-color);
    border-radius: var(--border-radius);
    padding: 0 0.5em;
  }

  &.left {
    text-align: left;
  }

  &.right {
    text-align: right;
  }

  &.center {
    text-align: center;
  }
}

.external-link-icon {
  display: inline-block;
  font-size: 0.8em;
  margin-left: 0.2em;
  vertical-align: middle;
}