.Bookmarks {
  display: grid;
  gap: 20px;
}

.Bookmarks-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  & button {
    margin-block: -9px;
  }
}

.Bookmark {
  border: 5px solid rgb(var(--color-black));
  box-shadow: inset 0 0 0 4px rgb(var(--color-yellow) / 0.1);
  border-radius: 10px;
  border-start-start-radius: 20px;
  border-end-end-radius: 20px;
  corner-shape: bevel;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  padding: 20px;
  position: relative;

  &:has(a:hover) {
    box-shadow: inset 0 0 0 4px rgb(var(--color-yellow) / 0.5);
  }

  & > :is(h2, h3, .flex) {
    grid-column: 1 / -1;
  }

  & > :is(h2, h3) {
    font-size: var(--font-size-3);

    & a {
      align-items: start;
      column-gap: 5px;
      display: flex;

      &::after {
        content: "";
        display: block;
        inset: 0;
        position: absolute;
      }

      & img {
        block-size: 20px;
        flex: 0 0 auto;
        inline-size: 20px;
        margin-block: 2px;
      }
    }
  }

  & > time {
    align-self: baseline;
    font-size: var(--font-size-2);
    font-weight: 700;
    grid-column: 1;
    white-space: nowrap;
  }

  & > code {
    align-self: baseline;
    font-size: var(--font-size-1);
    grid-template-columns: 2;
    text-overflow: ellipsis;
    opacity: 0.8;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
  }

  & form {
    display: contents;
  }

  & :is(button, form) {
    z-index: 1;
  }
}