tiptap/examples/Components/Subnavigation/style.scss

@import "~variables";

.subnavigation {

  padding: 0.5rem;
  background-color: rgba($color-black, 0.9);
  color: $color-white;
  text-align: center;

  @media (min-width: 600px) {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  &__link {
    display: inline-block;
    color: rgba($color-white, 0.5);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;

    &:hover {
      color: $color-white;
      background-color: rgba($color-white, 0.1);
    }

    &.is-exact-active {
      color: $color-white;
      background-color: rgba($color-white, 0.2);
    }
  }

}