@import "./common.less";

.mod-slot {
  border-left: 4px solid transparent;
  text-align: center;
  margin: 0 0 10px;
  border-radius: 4px;
  background: @theme_back;
  box-shadow: 0 2px 12px 0 @shadow;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  > .icon-plus-btn {
    font-size: 40px;
    color: @theme_leaf;
  }
  &:hover > .icon-plus-btn,
  > .el-icon-close {
    color: @theme_main;
  }
  &.active {
    cursor: pointer;
  }
  &.n {
    border-left-color: @mod_n;
  }
  &.c {
    border-left-color: @mod_c;
  }
  &.r {
    border-left-color: @mod_r;
  }
  &.g {
    border-left-color: @mod_g;
  }
  &.l {
    border-left-color: @mod_l;
  }
  &.x {
    border-left-color: @mod_x;
  }
  .mod-title {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    transition: 0.3s;
    cursor: move;
    font-size: 20px;
    border-radius: 4px 0 0 4px;
    flex: 1;
    position: relative;
    flex-wrap: wrap;
    &:hover {
      background: @theme_hover;
    }
    .mod-name {
      width: 100%;
    }
    .mod-polarity {
      position: absolute;
      left: 10px;
      top: 2px;
      font-size: 1rem;
      &.np {
        color: #67c23a;
      }
      &.wp {
        color: #f73c3c;
      }
    }
  }

  .mod-stat {
    .mod-prop {
      font-size: 9pt;
      color: @half_grey;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
    }
    width: 100%;
  }
  .mod-sum {
    font-size: 11pt;
    color: @text_info;
  }
  .mod-detail {
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
    flex: 1;
    width: 50%;
    &:hover {
      background: @delete_hover;
      .mod-stat {
        display: none;
      }
      .mod-action {
        display: initial;
      }
    }
  }
  .mod-action {
    display: none;
  }
  .mod-slot-remove {
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 36px;
  }
}

.mod-header-icon {
  font-size: 1.3em;
  position: absolute;
  top: 0;
  color: @theme_main;
}

.mod-level {
  display: inline-block;
  .el-input-number {
    .el-input-number__decrease,
    .el-input-number__increase,
    .el-input > input {
      background: none;
      border: 0;
    }
  }
}

.mod-title {
  .mod-level {
    font-size: 14px;
    .el-input-number--mini {
      width: auto;
    }
  }
}

.mod-slot.leveled .mod-name {
  font-size: 16px;
}
