.yc-menu {
  position: relative;
  transition: width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  .yc-menu-inner {
    overflow: auto;
    padding: 4px 8px;
    display: flex;
  }
  .yc-menu-collapse-button {
    cursor: pointer;
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 24px;
    height: 24px;
    border-radius: var(--border-radius-small);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
// mode
.yc-menu-mode-vertical {
  // height: 100%;
  .yc-menu-inner {
    height: 100%;
    flex-direction: column;
    gap: 4px;
  }
}
.yc-menu-mode-horizontal {
  .yc-menu-inner {
    position: relative;
    overflow: hidden;
    min-height: 58px;
    width: 100%;
    padding: 14px 20px 14px 32px;
    display: flex;
    align-items: center;
    gap: 12px;

    .yc-menu-inline {
      flex-shrink: 0;
    }
  }
}
// collapsed
.yc-menu-collapsed {
  .yc-menu-inner {
    padding: 4px;
  }
}
// theme
@menu-theme: light, dark;
each(@menu-theme, {
  .yc-menu-@{value} {
    background-color: if(@value=light,var(--color-menu-light-bg),var(--color-menu-dark-bg));
    .yc-menu-collapse-button {
      color: if(@value=light,var(--color-text-3),var(--color-white));
      background-color: if(@value=light,var(--color-fill-1),rgb(var(--primary-6)));
      &:hover {
        background-color: if(@value=light,var(--color-fill-3),rgb(var(--primary-7)));
      }
    }
  }
});
