/*  nav.st.css  */
@namespace "Nav";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --spacing-unit,
    --color-link,
    --font-family-base,
    --base-font-size;
}

:import {
  -st-from: "../../components/Nav/nav.st.css";
  -st-default: Nav;
}

@st-scope Base {
  Nav::anchor {
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 2);
    margin-right: 30px;
    color: var(--color-link);
    font-family: var(--font-family-base);
    font-size: var(--base-font-size);
    text-decoration: none;
    outline: none;
  }

  Nav::anchor:hover,
  Nav::anchor:focus,
  Nav::isActive {
    text-decoration: underline;
  }
}

@st-scope [dir=rtl] Base {
  Nav::anchor {
    margin-right: initial;
    margin-left: 30px;
  }
}

@media value(tablet) {
  @st-scope Base {
    Nav::anchor {
      display: inline-block;
      padding-bottom: 0;
    }
  }
}