/* -----------------------------------------
   LIST STYLES /src/styles/components/lists.scss
----------------------------------------- */

/* We assign the specificity to the defaults as 1-1-1 */
/*
  we don't want to mess with the following components:
  - .nav
*/
#page-container ul:not(.nav) {
  list-style-type: disc;

  ul {
    list-style-type: circle;

    ul {
      list-style-type: square;
    }  
  }
}

#page-container ol {
  list-style-type: decimal;

  ol{
    list-style-type: lower-alpha;

    ol{
      list-style-type: lower-roman;
    }
  }
  
}

.list-overstated,
.list-understated{
    padding-left: 0;
    
    li{
        list-style-type: "\45";
        margin: 10px 0;

        &::marker{
            font-family: 'CaGov';
        }
    }
}
.list-overstated a{
    font-weight: bold;
}

.list-standout{
    li {
        list-style-type: none;
        margin: 10px 0;
        margin-left: 2rem;
        
        &::before{
            content: "\35";
            font-family: 'CaGov';
            font-size: 1.5rem;
            font-weight: 900;
            margin-left: -2.5rem;
            width: 2.5rem;
            display: inline-block;
            vertical-align: -0.2rem;
        }
    }
}

.cagov-step-list {
    padding-left: 0 !important;
    margin-left: 1.5rem !important;
    counter-reset: step-list-count;
  
    > li {
      list-style: none;
      border-left: 5px solid;
      font-size: 1.75rem;
      font-weight: $font-weight-bold;
      position: relative;
      padding-left: 45px;
      line-height: $line-height-base;
      margin-bottom: 0;
      border-color: var(--bs-highlight, $highlight );
  
      // The circle bullet
      &::before {
        font-size: 1.625rem;
        font-weight: 700;
        border: 5px solid;
        background-color: #fff;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        left: -27px;
        top: -3px;
        counter-increment: step-list-count;
        content: counter(step-list-count);
        width: 50px;
        border-color: var(--bs-highlight, $highlight );
      }
  
      // Don't draw the last verticle line
      &:last-child {
        border-left: none;
  
        // Indent to compensate for the border
        &::before {
          margin-left: 5px;
        }
      }
  
      // list content
      .cagov-step-list-content {
        margin-top: 1rem;
        padding-bottom: 1.75rem;
        font-size: calc($font-size-base + $ratio);
        font-weight: $font-weight-normal;
        display: block;
      }
    }
}

.list-navigation,
.side-navigation ul {
  margin-left: 0;
  padding-left: 0;

  li {
    list-style: none;
    margin: 0;
    font-size: calc($font-size-base + $ratio);
    padding-left: 0;

    a {
      position: relative;
      display: block;
      word-wrap: break-word;
      word-break: break-word;
      text-decoration: none !important;
      color: var(--bs-gray-700, $gray-700);
      padding-bottom: 0.7rem !important;
      padding-top: 0.7rem !important;
      padding-left: 1.5rem !important;
      border-bottom: 1px solid var(--bs-gray-75, $gray-75);

      &:hover {
        color: var(--bs-gray-900, $gray-900);
      }

      &.landing {
        font-weight: $font-weight-bold;

        &.active {
          background-color: var(--bs-gray-75, $gray-75);

          &:hover,
          &:focus {
            background-color: var(--bs-gray-75, $gray-75);
          }
        }

        &.back {
          padding-left: 1.5rem;

          &::after {
            content: "\e668";
            position: absolute;
            font-family: CaGov;
            left: 0;
            top: 0.65rem;
          }
        }
      }

      &.active {
        color: var(--bs-gray-800, $gray-800);
        text-decoration: none;
        background-color: var(--bs-gray-75, $gray-75);

        &:hover,
        &:focus {
          color: var(--bs-black, $black);
          text-decoration: none;
          background-color: var(--bs-gray-75, $gray-75);
        }

        &::before {
          content: "";
          border-left: 3px solid;
          border-left-color: var(--bs-highlight, $highlight);
          position: absolute;
          top: 0;
          left: 0;
          width: 3px;
          height: 100%;
          border-radius: 0;
        }
      }
    }

    a:hover,
    a:focus {
      text-decoration: none;
      background-color: var(--bs-gray-50, $gray-50);
      color: var(--bs-gray-900, $gray-900);
    }

    a:focus {
      @include outline(2px);

      outline-offset: -2px;
    }

    // second level
    ul {
      padding-left: 0;

      li {
        margin: 0;

        a {
          padding-left: 2.5rem;

          &.active {
            color: var(--bs-gray-800, $gray-800);
            text-decoration: none;

            &:hover,
            &:focus {
              color: var(--bs-black, $black);
              text-decoration: none;
            }

            ::before {
              border-left-color: var(--bs-highlight, $highlight);
            }
          }
        }
      }
    }
  }
}