/* the title bar shared by full-page tools, see layouts/_tool_nav */

@layer tool-nav {
  .tool-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 2rem;

    .tool-title {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      align-items: center;

      a {
        margin: 0 0.25rem;
        text-decoration: none;
        color: var(--page-link-title-fg);
        svg {
          width: 1.4rem;
          height: 1.4rem;
          padding-bottom: 0.15rem;
          fill: var(--page-link-title-fg);
        }
        &:hover {
          color: var(--page-link-title-fg-hover);
        }
      }

      .tool-title-long {
        display: none;
      }

      @media (min-width: 700px) {
        .tool-title-short {
          display: none;
        }
        .tool-title-long {
          display: inline;
        }
      }
    }

    .theme-toggle {
      margin: 0 0.5rem;
      color: var(--page-subdued);
      svg {
        width: 1.35rem;
        height: 1.35rem;
        fill: var(--page-subdued);
      }
    }
  }
}