@import '~antd/lib/style/themes/variable.less';
@import '../../style/vars.less';

.item {
  border-radius: 4px;
  padding: 5px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: default;

  &.editable {
    &.vertical {
      & :global {
        animation: swing;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
      }
    }
  }

  &.hoverable {
    &:hover {
      background: @primary-color-hover;

      .label {
        color: @text-color-inverse;
      }
    }
  }

  &.bordered {
    border: 1px solid @primary-color-hover;
  }

  &.horizontal {
    margin: 5px 0;

    .logo,
    .label {
      justify-content: flex-start;
      align-items: center;
    }

    .logo {
      margin-right: 5px;
    }
  }

  &.vertical {
    flex-direction: column;
    margin: 5px 0;

    .logo,
    .label {
      justify-content: center;
      align-items: center;
    }

    .logo {
      margin-bottom: 5px;

      .span {
        font-size: 20px;
      }
    }

    .label {
      font-size: 12px;
    }
  }

  &.active {
    background: @primary-color-hover;

    .label {
      color: @text-color-inverse;
    }
  }

  &.normal {
    padding: 5px;

    .logo {
      font-size: @font-size-base + 6px;

      .span {
        font-size: @font-size-base + 6px;
      }
    }

    &.vertical {
      width: 56px;
      height: 56px;

      .label {
        font-size: @font-size-sm;
      }
    }
  }

  &.large {
    .logo {
      font-size: 28px;
      width: 36px;
      height: 36px;

      .span {
        font-size: 28px;
      }
    }

    .label {
      font-size: @font-size-base;
    }

    &.vertical {
      width: 80px;
      height: 80px;
    }
  }

  &.small {
    .logo {
      font-size: @font-size-base;

      .span {
        font-size: @font-size-base;
      }
    }
  }

  &.treeStyle {
    padding-left: 40px;

    &:before {
      position: absolute;
      content: '';
      top: -10px;
      left: 1.5em;
      width: 1em;
      height: 30px;
      border-style: none none solid solid;
      border-width: 0.05em;
      border-color: #aaa;
    }

    &:first-child:before {
      border-style: none none solid none;
    }

    &:not(:last-child):after {
      position: absolute;
      content: '';
      top: 0;
      left: 1.5em;
      bottom: 0;
      border-style: none none none solid;
      border-width: 0.05em;
      border-color: #aaa;
    }
  }
}

.logo,
.label {
  display: flex;
}

.logo {
  flex: 0 0 auto;
  border-radius: 4px;
  background: rgb(70, 137, 248);
  width: 30px;
  height: 30px;
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
  color: @text-color-inverse;

  span {
    color: @text-color-inverse;
  }

  &.transparent {
    background: transparent;
    color: @gray-9;
  }
}

.label {
  flex: 1 1 auto;
  font-weight: bold;
  font-size: 14px;
  color: @gray-9;
}

.dot {
  font-size: @font-size-sm;
  color: @gray-6;
}

.remove {
  position: absolute;
  font-size: @font-size-base + 14px;
  font-weight: bold;
  color: #f5222d;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  height: 80%;
  width: 80%;
  cursor: pointer;
  transition: all ease 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 88;
}