/* For buttons used for navigation in the main index pages */

.md-typeset .md-button {
  border-radius: .4rem;
  padding: .8rem 2rem;
  margin-top: .3rem;
  background-color: var(--button-primary-fg-color);
  border-color: var(--button-primary-bg-color);
  color: var(--md-primary-fg-color);
  box-sizing: border-box;

  &:hover {
    border-color: var(--color-nav2-light-blue);
    background-color: var(--color-nav2-light-blue);
    box-shadow: 0 2px 2px #00000034;
    transform: translateY(-1px);
    transition: position 0.2s ease;
  }
}

.md-typeset .md-button--primary {
  background-color: var(--button-primary-bg-color);
  border-color: var(--button-primary-bg-color);
  color: var(--md-primary-bg-color);
}

/* Adapt the grid to work with buttons */
.md-typeset .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr));
  grid-gap: .5rem;
  margin: 1em 0;
  align-content: start;
  align-items: stretch;

  & > p {
    display: contents;  /* Makes the <p> wrapper invisible to grid layout */
    margin: 0;
  }

  .md-button {
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: .4rem;
    padding: .8rem 2rem;
    margin: 0;
    background-color: var(--button-primary-bg-color);
    border-color: var(--button-primary-bg-color);
    box-sizing: border-box;

    &:hover {
      border-color: var(--color-nav2-light-blue);
      background-color: var(--color-nav2-light-blue);
      box-shadow: 0 2px 2px #00000034;
      transform: translateY(-1px);
      transition: position 0.2s ease;
    }
  }
}

/* Card grid blue left accent */
.md-typeset .grid.cards {

  & > ul > li {
  border-left: 4px solid var(--color-nav2-blue);
  }

  &.bottom-align > ul > li {
    display: flex;
    flex-direction: column;

    & > p {
      margin: 0;
    }

    & > :last-child {
      margin-top: auto;
    }
  }
}