/*!
 * @author: tvc12 - Thien Vi
 * @created: 5/11/21, 4:16 PM
 */

@import '~@/themes/scss/mixin.scss';

::v-deep {
  .sortable-chosen {
    background-color: var(--hover-color);
    cursor: pointer;

    &:hover {
      cursor: pointer;
    }

    &:active {
      background-color: var(--active-color);
      cursor: grabbing;
    }
  }
}

.draggable {
  height: 100%;

  &:not(:empty) {
    margin: 8px;
  }

  > div + div {
    margin-top: 8px;
  }
}

.body {
  > div.draggable.placeholder:not(:empty) {
    padding-bottom: 49px;
  }

  > .draggable:not(:empty) + .tutorial-drop {
    position: absolute;
    width: 100%;
    bottom: 0;
    //pointer-events: none;
  }
}

.item-contents {
  display: flex;
  flex-wrap: wrap;
  letter-spacing: 0.2px;
  margin: 0 auto;
  padding: 0 auto;
  text-align: left;

  width: 100%;

  .select-function {
    @include regular-text();
    font-size: 14px;
    padding: 0 4px;
    text-decoration: underline;
  }

  .display-name {
    @include bold-text();
    font-size: 14px;
    margin: 0;
    padding: 0 4px;
    text-decoration: underline;
  }

  .display-n-element {
    @include bold-text-14();
    margin: 0;
    padding: 0 4px;
    text-decoration: none;
  }
}

.field-context {
  max-height: 316px;
  max-width: 250px;
}
