#skip-to-main {
  position: absolute;
  top: 0.75rem;
  left: -24rem;
  z-index: 1080;
  transform: translateX(0);

  &:focus {
    transform: translateX(25rem);
  }
}

.text-icon {
  margin: 0 0.25rem;
  width: 20px;
  height: 20px;
}

// Used on the custom repositories page for
// listing third-party repository options.
.logo-link-grids {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  margin-left: 1rem;

  a {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    span {
      font-weight: 500;
    }
  }

  img {
    width: 3rem;
    margin: 0.25rem;
  }
}

// Callouts for related lints in Effective Dart guidelines.
.linter-rule {
  margin-block-start: -0.375rem;
  font-size: 0.9em;
  font-style: italic;
}

// Columns of tools on the tool index page.
.cols2 {
  list-style: none;
  column-count: 2;
  column-gap: 0;
  padding-left: 0.5rem;

  li {
    page-break-inside: avoid;
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}

.book-img-with-details {
  margin-block-start: 0.5rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  column-gap: 2rem;

  @media (min-width: 576px) {
    flex-direction: row;
    margin-block-start: 1.5rem;
  }

  img {
    min-width: 0;
    width: 160px;
    max-width: 240px;

    @media (min-width: 768px) {
      width: 200px;
    }
  }

  .header-wrapper {
    margin-block-start: 0.25rem;
  }

  h3 {
    margin-block-start: 0;
  }

  .authors {
    margin-block-start: -0.5rem;
  }

  h3.title {
    font-size: 1.5rem;
  }
}

// Used for third-party entries on tools index page.
.list-image {
  width: 48px;
  margin: 0.25rem;
}

// Make icons used in system requirements table unselectable.
.system-support {
  user-select: none;
}

// Used for lightening entries on the SDK archive.
.muted {
  color: var(--site-base-fgColor-alt);
}

// Elements on the archive for each channel.
#stable, #beta, #dev {
  margin-top: 1rem;

  tbody {
    tr {
      transition: all .25s ease-in-out;

      &.hidden {
        display: none;
      }
    }
  }
}

body.obsolete {
  #site-header {
    .alert {
      background-color: #fcf8e3;

      padding: 0.5rem;
      margin: 0;

      h4 {
        margin-bottom: 0;
        margin-top: 0;
      }
    }
  }
}
