//menu
$menu-back-ground-color-dark: #0d1117 !default;
$border-color-dark: rgba(170, 170, 170, 0.329) !default;
$scroll-bar-color-dark: #686868 !default;
$header-color-dark: #ffffffb3 !default;

//menu item prepend icon
$icon-color-dark: rgb(218, 221, 225) !default;
$icon-active-color-dark: rgb(44, 122, 224) !default;
$icon-mini-active-color-dark: rgb(44, 122, 224) !default;
$icon-hover-color-dark: '' !default;

//menu item
$menu-item-bg-color-dark: none !default;
$menu-item-hover-bg-dark: hsla(0, 0%, 100%, 0.05) !default;
$menu-item-active-bg-color-dark: hsla(0, 0%, 100%, 0.05) !default;
$mini-active-item-bg-color-dark: none !default;

//menu item label
$text-color-none-hover-dark: rgb(218, 221, 225) !default;
$text-active-color-dark: rgb(44, 122, 224) !default;
$text-mini-active-color-dark: rgb(44, 122, 224) !default;
$text-hover-color-dark: none !default;

//menu item append icon
$append-icon-color-dark: rgb(218, 221, 225) !default;
$append-active-icon-color-dark: rgb(218, 221, 225) !default;

//horizental line
$hr-line-color-dark: rgba(211, 211, 211, 0.548) !default;

//bottomBtn for miniMenu
$bottomBtn-bg-color-dark: #13161b !default;

.vas-menu {
  &.dark-theme {
    background-color: $menu-back-ground-color-dark;
    .bottomBtn {
      background-color: $bottomBtn-bg-color-dark;
    }
    .vas-hr {
      border-color: $hr-line-color-dark;
    }
    &.rtl {
      border-left: 1px solid $border-color-dark;
    }
    &.ltr {
      border-right: 1px solid $border-color-dark;
    }
    ::-webkit-scrollbar-thumb {
      color: $scroll-bar-color-dark;
    }
    .vsss-header {
      color: $header-color-dark;
    }
    &.rtl {
      .topContainer {
        border-top: 1px solid $border-color-dark;
        border-bottom: 1px solid $border-color-dark;
        border-left: 1px solid $border-color-dark;
        background-color: $menu-back-ground-color-dark;
      }
    }
    &.ltr {
      .topContainer {
        border-top: 1px solid $border-color-dark;
        border-bottom: 1px solid $border-color-dark;
        border-right: 1px solid $border-color-dark;
        background-color: $menu-back-ground-color-dark;
      }
    }
    // .vas-simple {
    .hoverClass {
      background: $menu-item-hover-bg-dark;
    }
    .BlockBack {
      background-color: $menu-back-ground-color-dark;
    }
    .label {
      background-color: $menu-item-bg-color-dark;
      &.activeClass::before {
        background-color: $text-active-color-dark;
      }
      &.activeClass {
        background: $menu-item-active-bg-color-dark;
        color: $text-active-color-dark;
        .menu-icon {
          color: $icon-active-color-dark;
        }
        .icons {
          background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="#{$append-active-icon-color-dark}" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>')
            50%/2rem 2rem;
          -webkit-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="#{$append-active-icon-color-dark}" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
          filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="#{$append-active-icon-color-dark}" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
        }
      }
      .menu-icon {
        color: $icon-color-dark;
      }

      &.miniActive {
        background: $mini-active-item-bg-color-dark;
        .labelName {
          color: $text-mini-active-color-dark;
        }
        .menu-icon {
          color: $icon-mini-active-color-dark;
        }
      }
      color: $text-color-none-hover-dark;
      &.labelHoverClass:hover {
        background-color: $menu-item-hover-bg-dark;
        .labelName {
          color: $text-hover-color-dark;
        }
        .menu-icon {
          color: $icon-hover-color-dark;
        }
        //color: $text-active-color-dark;
      }
    }
    .labelMini {
      &.activeClass::before {
        background-color: $text-active-color-dark;
      }
      overflow: hidden;
      background-color: $menu-item-hover-bg-dark;
      //background: rgb(54, 54, 54);
      // width: 30px;
      color: $text-color-none-hover-dark;
      &.activeClass {
        background-color: $menu-item-active-bg-color-dark;
        color: $text-active-color-dark;
        .menu-icon {
          color: $icon-active-color-dark;
        }
      }
      &.miniActive {
        background-color: $menu-item-hover-bg-dark;
        .labelName {
          color: $text-mini-active-color-dark;
        }
        .menu-icon {
          color: $icon-mini-active-color-dark;
        }
      }
    }
    .icons {
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="#{$append-icon-color-dark}" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>')
        50%/2rem 2rem;
      -webkit-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="#{$append-icon-color-dark}" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
      filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="#{$append-icon-color-dark}" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
    }
  }
}
