.container {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
  border-radius: 10px;
  color: var(--textLight);

  .icon {
    color: var(--iconLight);

  }

}

.containerCompact {
  //width: 24px;
  //border: 1px solid #e4e7ec;
  border-radius: 10px;
  color: var(--textLight);
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 6px;
  align-items: center;
  gap: 10px;
  margin: 30px 0px;

  .icon {
    //border: #5d57c9 1px solid;
    width: 30px;
  }

}

/* 在屏幕宽度小于1024像素时的样式 */
//@media (max-width: 1024px) {
//  .container{
//    //width: 24px;
//    //border: 1px solid #e4e7ec;
//    display: flex;
//    flex-direction: row;
//    justify-content: center;
//    padding:6px;
//    align-items: center;
//    gap: 10px;
//    margin: 30px 0px;
//    .icon{
//      //border: #5d57c9 1px solid;
//      width: 30px;
//    }
//  }
//}

.container:hover,
.active {
  //background-color: #76a0ea;
  color: var(--text);
  //background-color: #c3d5f1;
  background: linear-gradient(135deg, #c3d5f1, var(--bgSideBar));
  background-size: 200% 200%;
  animation: gradientAnimation 6s ease infinite;

  .icon {
    color: var(--text);
  }
}
