:root {
  --sidebar-bg-color: #ff7600;
  --sidebar-text-color: #010101;
  --sidebar-text-color-inverse: #ffffff;
  --scrollbar-thumb-color: darken(#ff7600, 10%);
  --scrollbar-track-color: lighten(#ff7600, 40%);
}

[data-kt-app-layout="dark-sidebar"] {
  .app-sidebar {
    background-color: var(--sidebar-bg-color);
    border-right: 0 !important;

    .hover-scroll-overlay-y {
      @include scrollbar-color(var(--scrollbar-thumb-color), var(--scrollbar-track-color));
    }

    .app-sidebar-logo {
      border-bottom: 1px dashed $app-sidebar-dark-separator-color;
    }

    .btn-custom {
      @include button-custom-variant(
        $color: #B5B5C3,
        $icon-color: #B5B5C3,
        $border-color: null,
        $bg-color: rgba(63, 66, 84, 0.35),
        $color-active: #B5B5C3,
        $icon-color-active: null,
        $border-color-active: null,
        $bg-color-active: rgba(63, 66, 84, 0.35)
      );
    }

    .menu {
      .menu-item {
        @include menu-link-default-state(
          $title-color: var(--sidebar-text-color),
          $icon-color: var(--sidebar-text-color),
          $bullet-color: var(--sidebar-text-color),
          $arrow-color: var(--sidebar-text-color),
          $bg-color: null
        );

        @include menu-link-hover-state(
          $title-color: var(--sidebar-text-color),
          $icon-color: var(--sidebar-text-color),
          $bullet-color: var(--sidebar-text-color),
          $arrow-color: var(--sidebar-text-color),
          $bg-color: null
        );

        @include menu-link-here-state(
          $title-color: var(--sidebar-text-color),
          $icon-color: var(--sidebar-text-color),
          $bullet-color: var(--sidebar-text-color),
          $arrow-color: var(--sidebar-text-color),
          $bg-color: null
        );

        @include menu-link-show-state(
          $title-color: var(--sidebar-text-color),
          $icon-color: var(--sidebar-text-color),
          $bullet-color: var(--sidebar-text-color),
          $arrow-color: var(--sidebar-text-color),
          $bg-color: null
        );

        @include menu-link-active-state(
          $title-color: var(--sidebar-text-color),
          $icon-color: var(--sidebar-text-color),
          $bullet-color: var(--sidebar-text-color),
          $arrow-color: var(--sidebar-text-color),
          $bg-color:var(--sidebar-text-color-inverse),
        );
      }
    }
  }
}

// Desktop mode
@include media-breakpoint-up(lg) {
  [data-kt-app-layout="dark-sidebar"] {
    .app-sidebar {
      .menu-sub-lg-dropdown {
        background-color: $app-sidebar-dark-bg-color;
      }
    }
  }
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active {
  color: var(--sidebar-text-color-inverse) !important;
}
