@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  & > div {
    position: relative;
    width: 49%;
    height: 64px;
    border-radius: 4px;
    margin-bottom: 8px;
  }

  .content {
    position: relative;
    h6 {
      @include TypographyTitleH6(inherit);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    p {
      @include TypographyParagraph($dark-color01);
    }

    .loadingTip {
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .innner {
    padding: 12px 8px;
  }

  .editting {
    border: dashed 1px $dark-color06;
    transition: all $trans-speed ease-in-out;
    cursor: grab;

    &:hover {
      background-color: $dark-color06;
      border-color: $dark-color02;
      .content {
        filter: blur(1px);
      }
    }

    .tools {
      display: none;

      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 2;

      justify-content: center;
      align-items: center;

      span + span {
        margin-left: 12px;
      }

      :global {
        .icon-clickable:hover,
        .icon-clickable:active {
          background-color: $light-color08;
        }
      }
    }

    &:hover {
      .tools {
        display: flex;
      }
    }
  }

  .addButton {
    border: dashed 1px $dark-color06;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all $trans-speed ease-in-out;

    &:hover {
      background-color: $dark-color06;
      border-color: $dark-color02;
      .content {
        filter: blur(1px);
      }
    }
  }
}
