form {
  background: rgb(var(--color-off-white));
  border: 5px solid rgb(var(--color-black));
  box-shadow: inset 0 0 0 4px rgb(var(--color-yellow));
  border-radius: 10px;
  border-start-start-radius: 20px;
  border-end-end-radius: 20px;
  corner-shape: bevel;
  color: rgb(var(--color-black));
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 30px;
  padding-block-start: 25px;

  & label {
    display: block;
    font-size: var(--font-size-3);
    font-weight: 700;
    inline-size: fit-content;
    line-height: var(--line-height-2);
  }

  & > * {
    grid-column: 1 / -1;
  }

  & > :is(.flex) {
    inline-size: 100%;
  }

  &[action*="editBookmark"] {
    & input {
      inline-size: 100%;
    }
  }

  &[action*="createBookmark"] {
    & input {
      inline-size: 100%;
    }

    & div:has(input[name="title"]) {
      display: grid;
      inline-size: 100%;
      grid-template-columns: 1fr auto;
      gap: 10px;

      & input {
        grid-column: 1;
      }
    }
  }

  @media (width >= 600px) {
    &[action*="logout"] {
      grid-template-columns: 1fr auto;

      & > * {
        grid-column: 1 / 2;
      }

      & > button {
        grid-column: 2;
        grid-row: 1 / 3;
      }
    }
  }

  &[action*="login"] {
    position: relative;

    &::before {
      background: rgb(var(--color-brown) / 0.2);
      content: "@" / "";
      display: grid;
      place-items: center;
      inline-size: 40px;
      inset-inline-start: calc(anchor(start) + 5px);
      inset-block-start: calc(anchor(start) + 5px);
      inset-block-end: calc(anchor(end) + 5px);
      position: fixed;
      position-anchor: --handle;

      @supports not (inset: anchor(start)) {
        display: none;
      }
    }

    & > input {
      inline-size: 100%;

      @supports (inset: anchor(start)) {
        padding-inline-start: 40px;
      }
    }

    @media (width >= 600px) {
      grid-template-columns: 1fr auto;

      & > input {
        grid-column: 1 / 2;
      }

      & > button {
        grid-column: 2 / 3;
      }
    }
  }
}