@use "@/assets/css/constants" as constants;

.left-panel {
  width: 16%;
  background-color: constants.$origin-color;

  .title {
    font-size: 2em;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.6em;
    padding: 10px;
    color: constants.$main-color;
  }

  .content {
    > ul {
      > li {
        //background-color: #4E47BB;
        margin: 4px 14px;

        &.item {
          font-size: 1.6em;
          border-radius: 8px;
          overflow: hidden;

          :hover {
            background-color: #4E47BB;
          }
        }

        a {
          display: flex;
          padding: 8px 16px;
          height: 100%;
          width: 100%;

          .icon {

          }

          .text {
            flex: 1;
            text-align: center;
          }
        }

        .separate {
          height: 0;
          border: {
            width: 1px;
            color: constants.$font-secondary-color;
            style: solid;
          };
          opacity: 0.4;
        }
      }
    }
  }
}

.right-panel {
  flex: 1;
  background-color: constants.$background-color;
}