@use '../colors';
@use '../layout';
@use '../typography';

// This is an HTML/CSS-only tabs component. It expects the following markup:
//
//   <div class="tabs-widget">
//     <div id="second" class="tab">Other, totally novel content.</div>
//     <a href="#second" rel="tab">Second</a>
//     <div id="first" class="tab">Some content, including a heading.</div>
//     <a href="#first" rel="tab">First</a>
//   </div>
//
// The key thing here is that the container is a flexbox with that flows in
// reverse row direction. That means that the first element in the container
// <div> will be shown last, which means we can use the ~ and + selectors to
// target all and the immediately following tabs and / or their corresponding
// links.
// The last tab in the DOM (which is shown first because of the reversed
// flexbox) is shown by default, while the other ones are hidden. If one of the
// tabs is targeted by the URL's hash, it is shown instead and the default tab
// is hidden.
.tabs-widget {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: #{-1 * layout.$large-gap};

  > a {
    display: block;
    margin: 0 layout.$normal-gap;
    text-decoration: none;
    color: inherit;
  }

  > .tab {
    flex: 100% 1;
    order: -1;
    display: none;
    margin: layout.$large-gap 0;
    padding: layout.$large-gap;
    background: colors.$gray-50;
    @include colors.card-shadow;

    &:last-of-type,
    &:target {
      display: block;

      + a {
        font-weight: typography.$emphasized-weight;
        color: colors.$blue-800;
      }
    }

    &:target {
      ~ .tab {
        display: none;

        + a {
          font-weight: inherit;
          color: inherit;
        }
      }
    }
  }
}