.item-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;

  > :is(.label, .name) {
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 600;
  }

  > .date {
    margin-bottom: -0.2rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.3em;
    color: gray;
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 400;

    > span {
      white-space: nowrap;
    }
  }
}

.ticket-item-list {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;

  .ticket-list-item {
    border: var(--toolbar-border);
    border-radius: 0;
    padding-block: 1.2rem;
    padding-inline: calc(1.6rem - var(--viewkit-toolbar-border-width));
    width: 100%;
    height: auto;
    min-height: 6.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name status"
      "date id";
    column-gap: 1.6rem;
    row-gap: 0.3rem;
    text-align: left;
    background: white;

    &:is(li:first-child > *) {
      border-top-left-radius: 1.6rem;
      border-top-right-radius: 1.6rem;
    }

    &:is(li:last-child > *) {
      border-bottom-right-radius: 1.6rem;
      border-bottom-left-radius: 1.6rem;
    }

    &:is(li + li > *) {
      border-top: none;
    }

    > .title {
      display: contents;
    }

    > .title > .name {
      grid-area: name;
      align-self: end;
      min-width: 0;
    }

    > .title > .date {
      grid-area: date;
      align-self: last baseline;
      margin-bottom: 0;
      min-width: 0;
    }

    > .status {
      grid-area: status;
      align-self: start;
      justify-self: end;
      height: 2.2rem;
      display: flex;
      align-items: center;
      color: black;
      font-size: 1.3rem;
      line-height: 1.3;
      font-weight: 400;

      &.controlled {
        color: var(--color-green);
      }

      > svg {
        width: 2.2rem;
        height: 2.2rem;
        fill: currentColor;
      }
    }

    > .id {
      grid-area: id;
      align-self: last baseline;
      justify-self: end;
      color: gray;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 1.4rem;
      line-height: 1.3;
      font-weight: 400;
      white-space: nowrap;
    }
  }
}

@media (width <= 470px) {
  .ticket-item-list .ticket-list-item {
    grid-template-areas:
      "name status"
      "date status"
      "id   status";
    column-gap: 0.8rem;

    > .status {
      align-self: stretch;
      height: auto;
      align-items: center;
    }

    > .id {
      justify-self: start;
    }
  }
}