@use "sass:color";
@use '../variables' as vars;

@mixin sidebar-theme {
  background-color: var(--vsm-base-bg);
  .vsm--item {
    color: var(--vsm-item-color);
  }
  .vsm--link {
    &_active {
      color: var(--vsm-item-active-color, inherit);
      background-color: var(--vsm-item-active-bg, transparent);
    }
    &_level-1 {
      &.vsm--link_active {
        box-shadow: 3px 0px 0px 0px var(--vsm-item-active-line-color) inset;
        & .vsm--icon {
          color: var(--vsm-icon-active-color, inherit);
          background-color: var(--vsm-icon-active-bg, var(--vsm-icon-bg));
        }
      }
      & .vsm--icon {
        background-color: var(--vsm-icon-bg);
      }
    }
    &_hover {
      color: var(--vsm-item-hover-color, inherit);
      background-color: var(--vsm-item-hover-bg);
    }
    &_mobile {
      color: var(--vsm-mobile-item-color);
    }
  }

  &.vsm_expanded {
    .vsm--link_level-1 {
      &.vsm--link_open {
        color: var(--vsm-item-open-color);
        background-color: var(--vsm-item-open-bg);
        & .vsm--icon {
          color: var(--vsm-icon-open-color, inherit);
          background-color: var(--vsm-icon-open-bg, transparent);
        }
      }
    }
  }

  &.vsm_collapsed {
    .vsm--link_level-1 {
      &.vsm--link_hover {
        .vsm--icon {
          color: var(--vsm-mobile-icon-color);
          background-color: var(--vsm-mobile-icon-bg);
        }
      }
    }
  }

  .vsm--icon {
    color: var(--vsm-icon-color, inherit);
  }

  .vsm--dropdown {
    background-color: var(--vsm-dropdown-bg);
    & .vsm--item {
      color: var(--vsm-dropdown-color, var(--vsm-item-color));
    }
  }

  .vsm--mobile-bg {
    background-color: var(--vsm-mobile-item-bg);
  }

  &.vsm_rtl {
    .vsm--link_level-1.vsm--link_active {
      box-shadow: -3px 0px 0px 0px var(--vsm-item-active-line-color) inset;
    }
  }

  .vsm--header {
    color: var(--vsm-header-item-color);
  }
  .vsm--badge_default {
    color: var(--vsm-badge-color);
    background-color: var(--vsm-badge-bg);
  }
  .vsm--toggle-btn {
    color: var(--vsm-toggle-btn-color);
    background-color: var(--vsm-toggle-btn-bg);
  }
}