@use '../theme';
@use '../mixins';

.Nav {
  &-link {
    display: block;
    padding: 0;
    margin: 0;
    color: inherit;
    text-decoration: underline;
    letter-spacing: inherit;
    background-color: transparent;
    border: none;

    &:hover, &:focus {
      text-decoration: wavy underline;
    }
  }

  &-separator {
    background-image: theme.$gradient;
    border: none;
    block-size: theme.$spacer-4xs;
  }
}

@include mixins.rainbowify-text('.Nav-link', 'color');
