.digit-msb-sidebar {
  background-color: theme(digitv2.lightTheme.paper-primary);
  color: theme(digitv2.lightTheme.primary-2);
  display: flex;
  flex-direction: column;
  transition: width 0.3s;
  position: fixed;
  height: 100%;
  overflow-x: hidden;
  left: 0;
  top: 0;
  min-width: 17.5rem;
  z-index: 1000;
  flex-direction: column;

  &.dark {
    background-color: theme(digitv2.lightTheme.primary-2);
    color: theme(digitv2.lightTheme.paper-primary);
  }
}

.digit-msb-profile {
  display: flex;
  align-items: center;
  padding: theme(digitv2.spacers.spacer6);
  flex-direction: column;
  gap: theme(digitv2.spacers.spacer3);
}

.digit-msb-profile-icon {
  width: 3.875rem;
  height: 4rem;
  margin-right: theme(digitv2.spacers.spacer4);
}

.digit-msb-profile-details {
  display: flex;
  flex-direction: column;
  gap: theme(digitv2.spacers.spacer1);
  text-align: center;
}

.digit-msb-profile-name {
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.bold);
  line-height: theme(digitv2.lineHeight.lineheight1);

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    font-size: theme(digitv2.fontSize.heading-s.mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    font-size: theme(digitv2.fontSize.heading-s.tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    font-size: theme(digitv2.fontSize.heading-s.desktop);
  }

  color: theme(digitv2.lightTheme.text-primary);

  &.dark {
    color: theme(digitv2.lightTheme.paper-primary);
  }
}

.digit-msb-profile-phone {
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.regular);
  line-height: theme(digitv2.lineHeight.lineheight2);

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    font-size: theme(digitv2.fontSize.body-s.mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    font-size: theme(digitv2.fontSize.body-s.tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    font-size: theme(digitv2.fontSize.body-s.desktop);
  }

  color: theme(digitv2.lightTheme.text-secondary);

  &.dark {
    color: theme(digitv2.lightTheme.paper-primary);
  }
}

.digit-msb-sidebar-items {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.digit-msb-item-child-wrapper {
  display: flex;
  flex-direction: column;
  height: theme(digitv2.spacers.spacer12);
  padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer6);
  justify-content: space-between;
  border-top: 0.063rem solid theme(digitv2.lightTheme.generic-divider);

  &.usermanuals{
    padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6);
    height: 3.5rem;
  }
}

.digit-msb-item-child-wrapper:last-child,
.digit-msb-item-child-wrapper.expanded {
  border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
}

.digit-msb-item-child-wrapper:not(.dark):nth-child(2n+1) {
  background-color: theme(digitv2.lightTheme.paper-secondary);
}

.digit-msb-item-child-wrapper.expanded {
  height: auto;
}

.digit-msb-sidebar-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.digit-msb-sidebar-item.digit-msb-parentLevel {
  height: theme(digitv2.spacers.spacer6);

  .digit-msb-item-label {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    line-height: theme(digitv2.lineHeight.lineheight1);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.heading-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.heading-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.heading-s.desktop);
    }
  }
}

.digit-msb-item-label{
  &.usermanuals{
    @extend .typography.body-xs;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.regular);
    line-height: theme(digitv2.lineHeight.lineheight2);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.body-xs.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.body-xs.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.body-xs.desktop);
    }
  }
}
.digit-msb-sidebar-item .digit-msb-icon {
  margin-right: theme(digitv2.spacers.spacer4);

  &.usermanuals{
    display: flex;
    width: theme(digitv2.spacers.spacer6);
    height: theme(digitv2.spacers.spacer6);
    justify-content: center;
    align-items: center;
    margin-right: theme(digitv2.spacers.spacer2);
  }
}

.digit-msb-expand-icon {
  margin-left: auto;
}

.digit-msb-sidebar-children {
  width: "100%";
  transition: height 0.3s ease;

  .digit-inner-level-child {
    margin-left: 2.25rem;
    border-left: 0.063rem solid theme(digitv2.lightTheme.generic-divider);

    &.dark {
      border-left: 0.063rem solid theme(digitv2.lightTheme.paper-primary);
    }
  }
}

.digit-msb-no-results{
  @extend .typography.body-s;
  display: flex;
  text-align: center;
  flex-direction: column;
  height: theme(digitv2.spacers.spacer12);
  padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer6);
  justify-content: space-between;
  border-top: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
  color:theme(digitv2.lightTheme.text-disabled);
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.regular);
  line-height: theme(digitv2.lineHeight.lineheight2);

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    font-size: theme(digitv2.fontSize.body-s.mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    font-size: theme(digitv2.fontSize.body-s.tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    font-size: theme(digitv2.fontSize.body-s.desktop);
  }
}


.digit-msb-sidebar-children.expanded {
  height: auto;
}


.digit-mb-search-container {
  height: 4.5rem;
  min-width: 15rem;
  width: auto;
  padding: theme(digitv2.spacers.spacer4) !important;

  .digit-mb-search {
    height: theme(digitv2.spacers.spacer10) !important;
    min-width: 13rem;

    .digit-text-input-customIcon {
      height: theme(digitv2.spacers.spacer6);
      width: theme(digitv2.spacers.spacer6);
      top: theme(digitv2.spacers.spacer2);
      right: theme(digitv2.spacers.spacer2);
    }

    .input-container {
      max-height: 100%;
    }

    input {
      max-height: 100%;
      background-color: theme(digitv2.lightTheme.paper-primary);
      border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
      color: theme(digitv2.lightTheme.text-primary);
      height: theme(digitv2.spacers.spacer8) !important;

      ::placeholder {
        color: theme(digitv2.lightTheme.text-disabled);
      }
    }

    .input-container:focus-within {
      input {
        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
      }
    }
  }

  ::placeholder {
    content: attr(placeholder);
    @extend .typography.body-s;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.regular);
    line-height: theme(digitv2.lineHeight.lineheight2);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.body-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.body-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.body-s.desktop);
    }
    color: theme(digitv2.lightTheme.text-disabled);
  }
}

.digit-mb-search-container.dark {
  height: 4.5rem;
  min-width: 15rem;
  width: auto;
  padding: theme(digitv2.spacers.spacer4) !important;

  .digit-mb-search {
    height: theme(digitv2.spacers.spacer10) !important;
    min-width: 13rem;

    .digit-text-input-customIcon {
      height: theme(digitv2.spacers.spacer6);
      width: theme(digitv2.spacers.spacer6);
      top: theme(digitv2.spacers.spacer2);
      right: theme(digitv2.spacers.spacer2);
    }

    .input-container {
      max-height: 100%;
    }

    input {
      max-height: 100%;
      background-color: transparent;
      border: 0.063rem solid theme(digitv2.lightTheme.paper-secondary);
      color: theme(digitv2.lightTheme.generic-background);

      ::placeholder {
        color: theme(digitv2.lightTheme.generic-background);
      }
    }

    .input-container:focus-within {
      input {
        border: 0.063rem solid theme(digitv2.lightTheme.paper-secondary) !important;
      }
    }
  }

  ::placeholder {
    content: attr(placeholder);
    @extend .typography.body-s;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.regular);
    line-height: theme(digitv2.lineHeight.lineheight2);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.body-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.body-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.body-s.desktop);
    }
    color: theme(digitv2.lightTheme.generic-background);
  }
}

.digit-msb-sidebar-bottom {
  background-color: theme(digitv2.lightTheme.paper-secondary);
  z-index: 5;
  padding: theme(digitv2.spacers.spacer4);
  display: flex;
  flex-direction: column;
  gap: theme(digitv2.spacers.spacer4);
  border-top: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
  height: 4rem;


  button {
    width: 100%;

    .icon-label-container .digit-button-customIcon {
      width: theme(digitv2.spacers.spacer5);
      height: theme(digitv2.spacers.spacer5);
      ;
    }
  }

  &.dark {
    background-color: theme(digitv2.lightTheme.primary-2);
  }
}

.digit-icon-msb {
  margin-right: theme(digitv2.spacers.spacer3);
  width: theme(digitv2.spacers.spacer6);
  height: theme(digitv2.spacers.spacer6);
  margin-left: theme(digitv2.spacers.spacer6);
}

.digit-item-label-msb {

  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.regular);
  line-height: theme(digitv2.lineHeight.lineheight2);

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    font-size: theme(digitv2.fontSize.body-s.mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    font-size: theme(digitv2.fontSize.body-s.tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    font-size: theme(digitv2.fontSize.body-s.desktop);
  }

  &.withoutIcon{
    margin-left: theme(digitv2.spacers.spacer7);
  }
}

.digit-expand-icon-msb {
  width: theme(digitv2.spacers.spacer6);
  height: theme(digitv2.spacers.spacer6);
  margin-left: auto !important;

  &.child-level{
    margin-right:1.5rem;
  }
}

.digit-sidebar-item-msb {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: background-color 0.3s;
  cursor: pointer;
  outline: none;
  height: 100%;
  width: 100%;
  position: relative;
}


.digit-item-child-wrapper-msb {
  width: 100%;
  height: theme(digitv2.spacers.spacer12);
  display: flex;
  align-items: center;
  justify-content: center;

  .digit-sidebar-item-msb:hover {
    background-color: #FFFFFF4D;
  }

  .digit-sidebar-item-msb:active,
  .digit-sidebar-item-msb.selected,
  .digit-sidebar-item-msb.selectedAsParent {
    background: #c84c0e1a;

    .digit-item-label-msb {
      color: theme(digitv2.lightTheme.primary-2);
    }
  }

  .digit-sidebar-item-msb.selected::before,
  .digit-sidebar-item-msb:active::before,
  .digit-sidebar-item-msb:active:hover::before,
  .digit-sidebar-item-msb.selected:hover::before,
  .digit-sidebar-item-msb.selectedAsParent::before,
  .digit-sidebar-item-msb.selectedAsParent:hover::before {
    content: '';
    position: absolute;
    top: 0.062rem;
    left: 0;
    bottom: 0.063rem;
    width: theme(digitv2.spacers.spacer2);
    background: theme(digitv2.lightTheme.primary-1);
    border-top-right-radius: theme(digitv2.spacers.spacer1);
    border-bottom-right-radius: theme(digitv2.spacers.spacer1);
  }

  .digit-sidebar-item-msb.dark:active,
  .digit-sidebar-item-msb.dark.selected,
  .digit-sidebar-item-msb.dark.selectedAsParent {
    background: theme(digitv2.lightTheme.primary-1);
    .digit-item-label-msb {
      color: theme(digitv2.lightTheme.paper-primary);
    }
  }

  .digit-sidebar-item-msb.dark.selected::before,
  .digit-sidebar-item-msb.dark:active::before,
  .digit-sidebar-item-msb.dark.selectedAsParent::before,
  .digit-sidebar-item-msb.dark:active:hover::before,
  .digit-sidebar-item-msb.dark.selected:hover::before,
  .digit-sidebar-item-msb.dark.selectedAsParent:hover::before {
    content: '';
    position: absolute;
    top: 0.062rem;
    left: 0;
    bottom: 0.063rem;
    width: theme(digitv2.spacers.spacer2);
    background: theme(digitv2.lightTheme.paper-primary);
    border-top-right-radius: theme(digitv2.spacers.spacer1);
    border-bottom-right-radius: theme(digitv2.spacers.spacer1);
  }
}


.digit-msb-sidebar-items::-webkit-scrollbar {
  width: 0.375rem;
  background-color: theme(digitv2.lightTheme.generic-background);
}

.digit-msb-sidebar-items::-webkit-scrollbar-track {
  background-color: theme(digitv2.lightTheme.generic-background);
  border-radius: 0.563rem;
}

.digit-msb-sidebar-items::-webkit-scrollbar-thumb {
  background-color: theme(digitv2.lightTheme.generic-divider);
  border-radius: 0.563rem;
}

.digit-hamburger-profile{
  width: 3.875rem;
  height: 4rem;
  object-fit: cover;
}