@layer component {
  .block--bms-primary-local-tasks {
    margin-block: 1.125rem;

    & ul {
      margin: 0;
      padding: 0;
      max-inline-size: max-content;
      display: flex;
      flex-wrap: wrap;
    }

    & li {
      list-style: none;
    }

    & li + li {
      margin-block-start: 0;
    }

    & li:first-of-type a {
      border-inline-start: 1px solid var(--gray-150);
      border-start-start-radius: var(--border-radius);
      border-end-start-radius: var(--border-radius);
    }

    & li:last-of-type a {
      border-inline-end: 1px solid var(--gray-150);
      border-start-end-radius: var(--border-radius);
      border-end-end-radius: var(--border-radius);
    }

    & li + li a {
      border-inline-start: 1px solid var(--gray-150);
    }

    & a {
      display: inline-block;
      background-color: var(--gray-50);
      padding: .5rem 1rem;;
      border-block: 1px solid var(--gray-150);
      text-decoration: none;
    }

    & a.is-active {
      background-color: var(--gray-100);
    }

    & a:hover,
    & a:focus-visible {
      background-color: var(--blue-700);
      color: var(--white);
    }
  }
}