@harvest-profit/npk/dist/Nav/Nav.module.css

NPK UI Design System

.NavLoadingButton {
  height: var(--control-size);
}

.Nav {
  display: flex;
  flex-direction: column;
  flex-direction: var(--nav-direction, column);
  gap: var(--nav-gap, var(--size-16));
}

.Nav[data-variant="primary"],.Nav[data-variant="secondary"] {
    min-width: 190px;
    max-width: 250px;
    --nav-direction: column;
    --control-font-size: var(--size-16);
    --control-size: var(--nav-control-size, 2.25rem);
  }

:is(.Nav[data-variant="primary"],.Nav[data-variant="secondary"]) section:not(:first-child) {
      border-top: 1px solid var(--nav-border-color);
    }

:is(.Nav[data-variant="primary"],.Nav[data-variant="secondary"]) .NavLoadingButton {
      min-width: 100%;
    }

.Nav[data-variant="underline"] {
    border-bottom: 1px solid var(--nav-border-color);
    --control-font-size: var(--size-16);
    --nav-direction: row;
    --btn-border-color: transparent;
    --btn-bg-color: transparent;
    --btn-fg-color: var(--control-fg-color);
    --btn-font-weight: var(--control-button-unweighted);
    --nav-button-padding: var(--size-8);
    --nav-gap: var(--size-12);
  }

.Nav[data-variant="underline"] [aria-current] {
      --btn-font-weight: var(--control-button-heavy);
      --btn-border-color: transparent;
      --btn-bg-color: transparent;
      --btn-fg-color: var(--control-fg-color);
      --btn-visual-color: var(--control-fg-color);

      --internal-nav-active-indicator-color: var(--nav-active-indicator-color);
    }

.Nav[data-variant="underline"] .NavLoadingButton {
      margin-bottom: var(--size-6);
    }

.Nav[data-variant="underline"] [data-component="button"] {
      position: relative;
      margin-bottom: var(--size-6);
      --control-padding: var(--nav-button-padding);
    }

:is(.Nav[data-variant="underline"] [data-component="button"])::after {
        position: absolute;
        bottom: calc((var(--size-8) + (var(--nav-underline-active-size)/2)) * -1);
        left: 0;
        right: 0;
        content: '';
        width: 100%;
        border-radius: var(--nav-underline-active-size);
        height: var(--nav-underline-active-size);
        background-color: transparent;
        background-color: var(--internal-nav-active-indicator-color, transparent);
      }

.Nav[data-variant="primary"] {
    --btn-border-color: transparent;
    --btn-bg-color: transparent;
    --btn-fg-color: var(--control-fg-color);
    --btn-font-weight: var(--control-button-unweighted);
    --nav-button-padding: 1.3rem;
  }

.Nav[data-variant="primary"] [data-component="button"] {
      --control-padding: var(--nav-button-padding);
    }

.Nav[data-variant="primary"] [aria-current] {
      --btn-font-weight: var(--control-button-heavy);
      --btn-border-color: var(--nav-control-bg-color-primary-variant--active);
      --btn-bg-color: var(--nav-control-bg-color-primary-variant--active);
      --btn-fg-color: var(--nav-control-fg-color-primary-variant--active);
      --btn-visual-color: var(--nav-control-fg-color-primary-variant--active);
      --btn-chip-bg-color: var(--nav-control-chip-bg-color-primary-variant--active);

      --btn-border-color--hover: var(--nav-control-bg-color-primary-variant--hover);
      --btn-bg-color--hover: var(--nav-control-bg-color-primary-variant--hover);
      --btn-fg-color--hover: var(--nav-control-fg-color-primary-variant--active);
    }

.Nav[data-variant="secondary"] {
    --nav-button-left-margin: var(--control-gap);
    --nav-button-padding: var(--size-8);

    --btn-border-color: transparent;
    --btn-bg-color: transparent;
    --btn-fg-color: var(--control-fg-color);
    --btn-font-weight: var(--control-button-unweighted);
  }

.Nav[data-variant="secondary"] [aria-current] {
      --btn-font-weight: var(--control-button-heavy);
      --btn-border-color: var(--nav-control-bg-color--active);
      --btn-bg-color: var(--nav-control-bg-color--active);
      --btn-fg-color: var(--control-fg-color);
      --btn-visual-color: var(--control-fg-color);

      --internal-nav-active-indicator-color: var(--nav-active-indicator-color);
    }

.Nav[data-variant="secondary"] [data-component="button"] {
      position: relative;
      margin-left: var(--nav-button-left-margin);
      --control-padding: var(--nav-button-padding);
    }

:is(.Nav[data-variant="secondary"] [data-component="button"])::before {
        position: absolute;
        left: calc(var(--nav-button-left-margin) * -1);
        content: '';
        width: var(--size-4);
        border-radius: var(--size-4);
        height: 100%;
        background-color: transparent;
        background-color: var(--internal-nav-active-indicator-color, transparent);
      }

.Nav section h3 {
    font-size: var(--size-12);
    color: var(--color-fg-muted);
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    padding: 0 calc(var(--nav-button-padding, var(--control-padding)) + 0px);
    padding: 0 calc(var(--nav-button-padding, var(--control-padding)) + var(--nav-button-left-margin, 0px));
  }

.Nav ul[data-component="nav-list"] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-direction: var(--nav-direction, column);
    gap: var(--nav-gap, var(--size-4));
  }

:is(.Nav ul[data-component="nav-list"]) > li {
      list-style: none;
      margin: 0;
      padding: 0;
    }