#bulk-update {
  .active {
    background: var(--green-6);
    animation: fadeOut 1s linear forwards;
  }

  .inactive {
    background: var(--red-6);
    animation: fadeOut 1s linear forwards;
  }
}

@keyframes fadeOut {
  to {
    background: var(--surface-1);
  }
}

#button-container {
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(6, 6rem);
  row-gap: .8rem;
  column-gap: .1rem;
  transform: skewY(-1deg);
  font-weight: bold;

  button {
    pointer-events: all;
    font-family: 'IBM Plex Mono', monospace;
    color: black;
    background: linear-gradient(0deg, #c39c47, #A3781A);
    height: 9rem;
    font-weight: bold;
  
    &.gray {
      background: linear-gradient(0deg, #a4adcd, #8796CF);
    }
  }
}

#lazy-load {
  display: flex;
  gap: var(--size-3);
  align-items: center;
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-size: var(--font-size-3);
}

#lazy-tabs {
  button[role=tab][aria-selected=true] {
    background-color: var(--_active-color);
  }
}

#throb {
  transition: all 1s var(--ease-out-quad);
  padding: var(--size-1) var(--size-3);
  border-radius: var(--radius-2);
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-9);
  text-shadow: 1px 1px var(--gray-4);
}

#view-transition {
  view-transition-name: view-transition;
}

::view-transition(view-transition) {
  transition: var(--fade-in-out);
}

#pokemon {
  display: flex;
  gap: var(--size-6);

  button {
    padding: 0;
    margin-top: auto;
    margin-bottom: auto;

    img {
      width: var(--size-9);
    }
  }

  img {
    width: var(--size-12);
  }
}

#sortContainer {}

#todo-header {
  display: flex;
  flex-direction: col;
  align-items: center;
}

#new-todo,
#edit-todo {
  width: 100%;
}

#todo-list {
  padding: 0 !important;
  list-style: none;

  li {
    display: flex;
    justify-content: left;
    align-items: center;

    input,
    label {
      cursor: pointer;
    }

    button.error {
      margin-left: auto;
    }

    &:not(:hover) button.error {
      display: none;
    }
  }
}

#todo-actions {
  display: flex;
  flex-direction: row;
  gap: var(--size-3);
  padding-top: var(--size-3);
}

#lod {
  display: grid;
  background-color: var(--gray-1);
  grid-template-areas:
    "header header"
    "article comments"
    "footer footer";
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: auto 1fr auto;
  height: 100%;
  border: 1px solid var(--gray-6);

  #header {
    grid-area: header;
    background-color: var(--gray-2);
    padding: 1rem;
    box-shadow: var(--shadow-2);
  }

  #article {
    grid-area: article;
    padding: 1rem;
    background-color: var(--gray-3);
  }

  #comments {
    grid-area: comments;
    padding: 1rem;
    background-color: var(--gray-4);

    ul {
      display: flex;
      flex-direction: column;
      gap: var(--size-2);
    }

    li {
      font-size: var(--font-size-0);
      list-style: none;
    }

    .avatar {
      float: left;
      margin-right: var(--size-4);
      width: var(--size-8);
      aspect-ratio: var(--aspect-square);
      border-radius: 50%;
    }
  }

  #footer {
    grid-area: footer;
    background-color: var(--gray-5);
    padding: 1rem;
  }
}