.yoo-sidebarheader {
  width: 270px;
  background-color: $main-color;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  left: 0;
  top: 0;
  border-right: 2px solid $base-color4;
  padding-top: 60px;
  z-index: 102;
  transition: all 0.3s ease;

  .yoo-sidebarheader-in {
    height: 100vh;
    height: 100%;

  }

  &.yoo-sidebarheader1 {
    width: 360px;
    padding-top: 0;

    .yoo-sidebar-nav {
      width: 100%;
    }
  }

  .btn {
    padding: 0.822em 1.12em;
  }
}

.yoo-sidebar-link-text,
.yoo-sidebar-nav-list .yoo-nav-label,
.yoo-dropdown-arrow,
.yoo-sidebar-link-icon {
  transition: all 0.3s ease;
}

.yoo-sidebar-nav {
  padding: 17px 10px 27px;
  overflow: hidden;
  width: 268px;
}

.yoo-sidebar-nav-list {
  color: $base-color1;
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }

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

  a {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    align-items: flex-start;
    color: $base-color1;
    position: relative;
    cursor: pointer;
    position: relative;
    min-height: 42px;
    align-items: center;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0;

    &:hover {
      background-color: $base-color4;
    }

    .yoo-sidebar-link-title {
      display: flex;
      align-items: center;
    }

    .yoo-sidebar-link-text {
      line-height: 1.25em;
    }
  }

  .yoo-sidebar-link-icon {
    color: rgba($base-color, 0.54);
    display: inline-block;
    font-size: 24px;
    margin-right: 12px;
    display: flex;
  }

  &>li {
    a {
      padding: 10px 14px;
    }
  }

  .yoo-nav-label {
    font-size: 10px;
    line-height: 1.5em;
    padding: 0 4px;
    border-radius: 2px;
    color: rgba(255, 255, 255, 0.9);
    background-color: $red-color;
  }

  li {
    position: relative;

    &.active {
      &>a {
        color: $indigo-color;
        background-color: rgba($indigo-color, 0.1);

        i {
          color: inherit;
        }

        &:hover {
          color: $indigo-color;
        }

        .yoo-sidebar-link-icon {
          color: $indigo-color;
        }
      }
    }

    &.yoo-sidebar-has-children {
      &>a {
        padding-right: 35px;
      }

      .yoo-dropdown-arrow {
        height: 7px;
        width: 7px;
        position: absolute;
        right: 18px;
        top: 18px;
        z-index: 2;
        cursor: pointer;
        border: 2px solid $base-color3;
        border-left: none;
        border-bottom: none;
        transform: rotate(45deg);
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        pointer-events: none;

        &.active {
          transform: rotate(135deg);
        }
      }

      .yoo-sidebar-nav-dropdown {
        &>li {
          a {
            padding-left: 47px;
            padding-top: 8px;
            padding-bottom: 8px;
            font-size: 14px;
          }
        }

        .yoo-sidebar-nav-dropdown {
          &>li {
            a {
              padding-left: 65px;
            }
          }

          .yoo-sidebar-nav-dropdown {
            &>li {
              a {
                padding-left: 95px;
              }
            }
          }
        }

        .yoo-sidebar-link-icon {
          font-size: 16px;
        }
      }
    }
  }

  .yoo-sidebar-nav-dropdown {
    display: none;
  }
}

.yoo-sidebar-nav-title {
  text-transform: uppercase;
  padding: 5px 16px;
  color: $base-color3;
  font-weight: 500;
  font-size: 12px;
  min-height: 29px;
  position: relative;
  width: 268px;
}

.yoo-sidebar-nav-title-text {
  transition: all 0.3s ease;
}

.yoo-sidebar-nav-title-dotline {
  position: absolute;
  height: 100%;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  font-size: 21px;
  color: $base-color3;
  opacity: 0;
  transition: all 0.3s ease;
}

.yoo-sidebar-active .yoo-sidebar-nav-title-dotline {
  opacity: 1;
}

.yoo-sidebar-active.yoo-sidebar-hover-active .yoo-sidebar-nav-title-dotline {
  opacity: 0;
}

.yoo-sidebar-nav-dot {
  display: flex;
  position: absolute;
  top: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

// Toggle Button
.yoo-sidebarheader-toggle {
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
  cursor: pointer;
  z-index: 104;
  position: fixed;
  top: 24px;
  left: 222px;
  transition: all 0.3s ease;

  div {
    -ms-flex-item-align: end;
    align-self: flex-end;
    height: 2px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.38);

    &.yoo-button-bar2 {
      width: 65.5%;
      transition: all 200ms ease-in-out;
    }

    &.yoo-button-bar3 {
      width: 35%;
      transition: all 400ms ease-in-out;
    }
  }

  &:hover {
    div {
      width: 100%;
    }

    .yoo-button-bar1 {
      animation: burger-hover 1s infinite ease-in-out alternate;
    }

    .yoo-button-bar2 {
      animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;
    }

    .yoo-button-bar3 {
      animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;
    }
  }
}

@keyframes burger-hover {
  0% {
    width: 100%;
  }

  50% {
    width: 50%;
  }

  100% {
    width: 100%;
  }
}

/* Start Sidebar heading Toggle Function */
.yoo-sidebar-active {
  .yoo-content.yoo-style1 {
    padding-left: 74px;
  }

  .yoo-sidebarheader {
    width: 74px;

    .yoo-sidebar-link-icon {
      margin-right: 0;
    }

    .yoo-sidebar-nav-dropdown,
    .yoo-nav-label,
    .yoo-sidebar-link-text,
    .yoo-sidebar-nav-title-text,
    .yoo-site-branding {
      opacity: 0;
      visibility: hidden;
    }

    .yoo-sidebar-nav-dot {
      opacity: 1;
      visibility: visible;
    }

    .yoo-sidebar-nav-dropdown li {
      display: none;
    }
  }

  /* Hover */
  &.yoo-sidebar-hover-active {
    .yoo-sidebarheader {
      width: 270px;
    }

    .yoo-sidebar-nav-dropdown,
    .yoo-nav-label,
    .yoo-sidebar-link-text,
    .yoo-sidebar-nav-title-text,
    .yoo-site-branding {
      opacity: 1;
      visibility: visible;
    }

    .yoo-sidebar-nav-dot {
      opacity: 0;
      visibility: hidden;
    }

    .yoo-sidebar-link-icon {
      margin-right: 15px;
    }

    .yoo-sidebar-nav-dropdown li {
      display: block;
    }

    .yoo-sidebar-nav-list li.active>a {
      background-color: rgba($indigo-color, 0.1);
    }
  }

  .yoo-sidebar-nav-list li.active>a {
    background-color: transparent;
  }
}

/* End Sidebar heading Toggle Function */
.yoo-sidebar-nav-list {
  li {
    padding-bottom: 5px;

    &:last-child {
      padding-bottom: 0;
    }
  }
}

.yoo-sidebar-nav-list .yoo-sidebar-nav-dropdown {
  padding-top: 5px;
}

.yoo-white-base {
  .yoo-sidebarheader-toggle div {
    background-color: $base-color3;
  }
}

.yoo-dark-base {
  &.yoo-sidebarheader {
    background-color: $indigo-color;
    border-right: none;
  }

  .yoo-sidebar-nav-list a {
    color: rgba(255, 255, 255, 0.87);
  }

  .yoo-sidebar-nav-title {
    color: rgba(255, 255, 255, 0.38);
  }

  .yoo-sidebar-nav-list .yoo-sidebar-link-icon {
    color: rgba(255, 255, 255, 0.54);
  }

  .yoo-sidebar-nav-list li.yoo-sidebar-has-children .yoo-dropdown-arrow {
    border-color: rgba(255, 255, 255, 0.38);
  }

  .yoo-sidebar-nav-list {
    color: rgba(255, 255, 255, 0.87);
  }

  .yoo-sidebar-nav-list a:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  [data-scrollbar] {
    .scrollbar-thumb:after {
      background-color: #000;
    }

    .scrollbar-thumb:before,
    .scrollbar-thumb:after {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }

  .yoo-sidebar-nav-list li.active>a {
    color: rgba(255, 255, 255, 0.87);
    background-color: rgba(0, 0, 0, 0.1);
  }

  .yoo-sidebar-nav-list li.active>a .yoo-sidebar-link-icon {
    color: rgba(255, 255, 255, 0.54);
  }
}

.yoo-sidebarheader-toggle.yoo-dark {
  div {
    background-color: rgba(0, 0, 0, 0.38);
  }
}

.yoo-sidebarheader.yoo-sidebar-bg {
  background-position: bottom center;
}

.yoo-sidebarheader.yoo-sidebar-bg.yoo-dark-base {
  border-right: none;
}

@media screen and (max-width: 1199px) {
  .yoo-sidebarheader {
    left: -270px;
  }

  .yoo-content.yoo-style1 {
    padding-left: 0;
  }

  .yoo-sidebarheader-toggle {
    left: 21px;
  }

  .yoo-sidebar-active {
    .yoo-content.yoo-style1 {
      padding-left: 0px;
    }

    .yoo-sidebarheader {
      width: 270px;
      left: 0;
      background-color: $main-color;

      .yoo-sidebar-link-icon {
        margin-right: 15px;
      }

      .yoo-sidebar-nav-dropdown,
      .yoo-nav-label,
      .yoo-sidebar-link-text,
      .yoo-sidebar-nav-title-text,
      .yoo-site-branding {
        opacity: 1;
        visibility: visible;
      }

      .yoo-sidebar-nav-dot {
        opacity: 0;
        visibility: hidden;
      }
    }

    .yoo-dark-base.yoo-sidebarheader {
      background-color: $indigo-color;
    }
  }

  .yoo-sidebar-active.yoo-sidebar-hover-active .yoo-sidebarheader {
    width: 100%;
  }

  .yoo-sidebar-nav-title-dotline {
    display: none;
  }
}