@use "colors";
@use "mixins";
@use "variables";

/* =Navs
-----------------------------------------------------------------------------*/
// Nav element reset
nav {
  ul {
    list-style: none;
    margin: 0;
  }
}


/* NavBar */
.navbar {
  background: var(--ply-nav-bg);
  border-bottom: 1px solid var(--ply-border-color);
  box-sizing: border-box;

  > ul {
    list-style: none;
    margin: 0;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 0;
  }

  a,
  > span {
    box-sizing: border-box;
    color: var(--ply-nav-color);
    display: block;
    font-weight: variables.$font-weight-medium;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;

    &:focus-visible {
      outline: 2px solid var(--ply-color-focus, #0f62fe);
      outline-offset: -2px;
    }
  }

  li {
    box-sizing: border-box;

    margin-right: 0;

    &:hover {
      a {
        background: var(--ply-nav-hover);
        color: var(--ply-nav-color);
        text-decoration: none;
      }
    }

    &.on a,
    &.on span,
    &.active a,
    &.active span {
      border-bottom-color: var(--ply-nav-border);
      background: var(--ply-nav-active-bg, transparent);
      text-decoration: none;
      cursor: default;
      color: var(--ply-nav-color);
    }
  }

  &.navbar-centered {
    > ul {
      justify-content: center;
    }
  }

  &.navbar-left {
    > ul {
      justify-content: flex-start;
    }
  }

  &.navbar-right {
    > ul {
      justify-content: flex-end;
    }
  }

  // Border variants
  &.navbar-thick {
    border-bottom-width: 2px;

    a, > span {
      margin-bottom: -2px;
    }
  }

  &.navbar-borderless {
    border-bottom: none;

    a, > span {
      margin-bottom: 0;
      border-bottom: none;
    }

    li {
      &.on a, &.on span,
      &.active a, &.active span {
        background: var(--ply-nav-hover);
        border-bottom: none;
      }
    }
  }

  &.navbar-border-blue   { border-bottom-color: var(--ply-color-link, #0f62fe); }
  &.navbar-border-green  { border-bottom-color: #198038; }
  &.navbar-border-red    { border-bottom-color: #da1e28; }
  &.navbar-border-yellow { border-bottom-color: #f1c21b; }

  // Vertical variant
  &.navbar-vertical {
    border-bottom: none;
    border-left: 1px solid var(--ply-border-color);

    > ul {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      width: 100%;
    }

    a, > span {
      border-bottom: none;
      margin-bottom: 0;
      border-left: 2px solid transparent;
      margin-left: -1px;
    }

    li {
      margin-right: 0;

      &.on a, &.active a,
      &.on span, &.active span {
        background: var(--ply-nav-hover);
        border-bottom: none;
        border-left-color: var(--ply-nav-border);
        text-decoration: none;
        cursor: default;
      }
    }

    &.navbar-thick {
      border-left-width: 2px;

      a, > span {
        margin-left: -2px;
      }
    }
  }
}

.navigation-toggle {
  box-sizing: border-box;

  background-color: var(--ply-nav-bg);
  border: 1px solid var(--ply-border-color);
  color: var(--ply-nav-color);
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: variables.$font-size-sm;
  position: relative;
  transition: background 0.15s ease;

  &:hover {
    background-color: var(--ply-nav-hover);
  }

  &:after {
    position: absolute;
    z-index: 1;
    top: 50%;
    margin-top: -12px;
    left: 10px;
    content: "\2630";
    font-size: 24px;
    line-height: 1;
  }

  // Border variants — match navbar
  &.navbar-thick {
    border-width: 2px;
  }

  &.navbar-borderless {
    border: none;
  }

  &.navbar-border-blue   { border-color: var(--ply-color-link, #0f62fe); }
  &.navbar-border-green  { border-color: #198038; }
  &.navbar-border-red    { border-color: #da1e28; }
  &.navbar-border-yellow { border-color: #f1c21b; }

  &.navigation-toggle-solid {
    background-color: var(--ply-nav-border);
    border: 1px solid var(--ply-nav-border);
    color: var(--ply-nav-bg);

    &:hover {
      opacity: 0.85;
    }
  }

  &.navigation-toggle-show {
    margin-bottom: 0;
  }

  & span {
    position: relative;
    z-index: 2;
    cursor: pointer;
    display: block;
    padding: 10px 20px 10px 40px;
  }
}

.navigation-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
}

/* Pills — Swiss/Modernist */
.navbar-pills {
  ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    gap: 2px;
  }

  a,
  span {
    display: block;
    padding: 0.625rem 1rem;
    text-decoration: none;
    font-size: variables.$font-size-sm;
    color: var(--ply-nav-color);
    transition: background 0.15s ease;
  }

  a:hover {
    color: var(--ply-nav-color);
    background: var(--ply-nav-hover);
  }

  a:focus-visible {
    outline: 2px solid var(--ply-color-focus, #0f62fe);
    outline-offset: 2px;
  }

  li.active a,
  li.active span {
    text-decoration: none;
    cursor: default;
    color: var(--ply-nav-active-color);
    background: var(--ply-bg-muted);
  }
}

/* Stacked — Swiss/Modernist */
.nav-stacked {
  ul {
    list-style: none;
    margin: 0;
  }

  li {
    margin-bottom: 0;
  }

  a,
  span {
    display: block;
    padding: 0.25rem 0.75rem;
    font-size: variables.$font-size-sm;
    border-radius: var(--ply-nav-stacked-radius, var(--ply-border-radius));
  }

  & a {
    color: var(--ply-nav-color);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;

    &:hover {
      color: var(--ply-nav-color);
      background: var(--ply-bg-muted);
    }

    &:focus-visible {
      outline: 2px solid var(--ply-color-focus, #0f62fe);
      outline-offset: 2px;
    }
  }

  li.active a,
  li.active span {
    border-left: 2px solid var(--ply-btn-default-bg, #0353e9);
    padding-left: calc(0.75rem - 2px);
    text-decoration: none;
    color: var(--ply-nav-active-color);
  }
}

/* Stacked blocked — background fills with bottom borders */
.nav-stacked-blocked {
  & a,
  & span {
    padding: 0.6rem 0.75rem;
  }

  & a {
    background: var(--ply-bg-surface-alt);
    border-bottom: 1px solid var(--ply-border-color);
  }

  li.active a,
  li.active span {
    background: var(--ply-bg-surface);
    border-left: none;
    padding-left: 0.75rem;
  }
}

/* Stats */
.nav-stats {
  li {
    position: relative;
  }

  a,
  span {
    padding-right: 50px;
  }

  sup,
  .badge {
    position: absolute;
    top: 50%;
    right: 0;
  }

  sup {
    color: var(--ply-color-muted);
  }

  .badge {
    margin-top: -8px;
  }
}

/* =Tabs — Swiss/Modernist
-----------------------------------------------------------------------------*/
.nav-tabs {
  border-bottom: 2px solid var(--ply-nav-border);
  margin-bottom: variables.$base-line;
  @include mixins.clearfix;

  & ul {
    list-style: none;
    margin: 0;
  }

  & li {
    float: left;
    margin-right: 0;
  }

  & a,
  & span {
    display: block;
    line-height: 1;
    padding: variables.$base-line * 0.5 variables.$base-line;
    font-size: variables.$font-size-sm;
    border: none;
  }

  & a {
    color: var(--ply-color-muted);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;

    &:focus,
    &:hover {
      color: var(--ply-nav-color);
      text-decoration: none;
      background-color: var(--ply-nav-hover);
    }

    &:focus-visible {
      outline: 2px solid var(--ply-color-focus, #0f62fe);
      outline-offset: 2px;
    }
  }

  & li.active a,
  & span {
    color: var(--ply-nav-color);
    background: var(--ply-bg-surface);
    position: relative;
    border-bottom: 2px solid var(--ply-nav-border);
    bottom: -2px;
    cursor: default;
    text-decoration: none;
  }
}


/* =Breadcrumbs — Swiss/Modernist
-----------------------------------------------------------------------------*/
.breadcrumbs {
  margin-bottom: variables.$base-line;
  @include mixins.clearfix;

  & ul {
    font-size: variables.$font-size-sm;
    color: var(--ply-color-muted);
    list-style: none;
    margin: 0;
    @include mixins.clearfix;
  }

  & li {
    float: left;
    margin-right: 5px;
  }

  & li + li:before {
    content: "/";
    color: var(--ply-color-muted);
    font-size: 12px;
    margin: 0 7px 0 5px;
    position: relative;
    top: -1px;
  }

  &.breadcrumbs-path li + li:before {
    content: " / ";
    top: 0;
  }

  & a {
    color: var(--ply-nav-color);
    text-decoration: none;

    &:hover {
      color: var(--ply-nav-color);
      text-decoration: underline;
    }

    &:focus-visible {
      outline: 2px solid var(--ply-color-focus, #0f62fe);
      outline-offset: 2px;
    }
  }

  & li.active a,
  & span,
  & li.active a:hover {
    text-decoration: none;
    cursor: default;
    color: var(--ply-color-muted);
  }
}



/* =Pagination — Outlined (default) with solid variant
-----------------------------------------------------------------------------*/
.pagination {
  display: flex;
  align-items: center;
  gap: variables.$grid-gutter-width * 0.5;
  margin: 0;
  padding: 0;
  list-style: none;

  & li {
    margin: 0;
  }

  & a,
  & span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: variables.$base-line * 1.5;
    height: variables.$base-line * 1.5;
    padding: variables.$grid-gutter-width * 0.5 variables.$padding;
    border: 1px solid var(--ply-border-color);
    border-radius: var(--ply-border-radius);
    background: var(--ply-bg-surface, #fff);
    color: var(--ply-color-body);
    text-decoration: none;
    font-size: variables.$font-size-sm;
    line-height: 1;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  & a:hover {
    background-color: var(--ply-bg-surface-alt);
    border-color: var(--ply-color-secondary);
    text-decoration: none;
  }

  & a:focus-visible {
    outline: 2px solid var(--ply-color-focus, #0f62fe);
    outline-offset: 2px;
  }

  & li.active a,
  & li.active a:hover,
  & li.active span {
    background-color: var(--ply-nav-color);
    border-color: var(--ply-nav-color);
    color: var(--ply-bg-surface);
    cursor: default;
  }

  & li.disabled a,
  & li.disabled span {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  // Prev/next arrows — ghost by default, fill on hover
  & li:first-child a,
  & li:first-child span,
  & li:last-child a,
  & li:last-child span {
    border-color: transparent;
    background: transparent;
  }

  & li:first-child a:hover,
  & li:last-child a:hover {
    background-color: var(--ply-bg-surface-alt);
    border-color: transparent;
  }

  // Disabled arrow — muted color
  & li.disabled:first-child span,
  & li.disabled:last-child span,
  & li.disabled:first-child a,
  & li.disabled:last-child a {
    color: var(--ply-color-muted);
    opacity: 1;
  }
}

/* Solid variant — filled background like the original Swiss style */
.pagination-solid {
  & a,
  & span {
    border-color: transparent;
    background: transparent;
  }

  & a:hover {
    background-color: var(--ply-nav-color);
    border-color: transparent;
    color: var(--ply-bg-surface);
  }

  & li.active a,
  & li.active a:hover,
  & li.active span {
    background-color: var(--ply-nav-color);
    border-color: transparent;
    color: var(--ply-bg-surface);
  }
}