@import "common/var";

.zte-modules {
  display: flex;
  height: 100%;
  .module {
    width: 80px;
    height: 55px;
    text-align: center;
    color: #f6f6f6;
    user-select: none;
    cursor: pointer;
    .icon {
      font-size: 20px;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin: 5px 0;
    }
    .name {
      font-size: 14px;
      margin: 5px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &.current,
    &:hover,
    &:focus {
      background-color: $dark;
      background-color: var(--dark);
      color: #fff;
    }
  }
}

.modules-popover {
  padding: 0;
  box-sizing: content-box;
  .more-modules {
    display: flex;
    flex-wrap: wrap;
    .module {
      width: 99px;
      flex: 0 0 99px;
      color: $theme;
      color: var(--theme);
      height: 60px;
      user-select: none;
      cursor: pointer;
      border-right: 1px solid #dcdfe6;
      border-bottom: 1px solid #dcdfe6;
      text-align: center;
      padding: 10px 0;
      .icon {
        font-size: 20px;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 5px 0;
      }
      .name {
        font-size: 14px;
        margin: 5px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &.current,
      &:hover,
      &:focus {
        background-color: $light;
        background-color: var(--light);
        color: #fff;
      }
    }
  }
}