.linkbox--style {
  margin: 20px 0;

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

  > div {
    display    : flex;
    align-items: center;

  }
}

.helper,
.iframe,
.linkbox {
  width          : 100%;
  height         : 100%;
  position       : fixed;
  top            : 0;
  left           : 0;

  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;

  background     : rgba($white, .5);

  pointer-events : none;
  opacity        : 0;
  display        : none;

  &:focus &__head {
    border       : 1px solid $red;
    border-bottom: 0;
  }

  &:focus &__container {
    border    : 1px solid $red;
    border-top: 0;
  }

  &.show {
    pointer-events: auto;
    opacity       : 1;
    display       : flex;
  }
  // &.hide {
  //   opacity       : 0;
  //   pointer-events: none;
  // }
  &__head {
    display      : flex;
    width        : 400px;
    border       : 1px solid $mediumgrey;
    border-bottom: 0;

    background   : $white;
  }

  &__container {

    background: $white;
    width     : 400px;

    padding   : 20px;

    border    : 1px solid $mediumgrey;
    border-top: 0;

    position  : relative;
  }

  &__head span {
    display   : block;

    width     : 50%;

    padding   : 20px;

    background: $mediumgrey;
    color     : $darkblue;

    box-shadow: inset 6px 0 16px rgba($darkblue, 0.03);

    &.isActive {
      box-shadow : none;
      background : $white;

      font-weight: 600;
      @include rem-size(16);

    }
  }

  &__body {
    position      : absolute;
    top           : 0;
    left          : 0;
    opacity       : 0;
    pointer-events: none;

    &.isActive {
      position      : relative;
      opacity       : 1;
      pointer-events: auto;
    }
  }

  &__footer {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-top     : 50px;
  }

  .m_label {
    color: $darkblue;
  }

  legend {
    display      : block;
    margin-bottom: 20px;
  }

  &--style {
    div {
      margin: 20px 0;
    }

    label {
      margin-left: 10px;
    }
  }
}

.hl {
  font-weight: 600;
}

.linkbox__link-list {
  width         : 100%;
  min-height    : 100px;
  max-height    : 400px;
  overflow      : auto;

  border        : 1px solid $lightblue;

  padding       : 20px 0;

  display       : flex;
  flex-direction: column;

  cursor        : pointer;

  &:focus {
    border: 1px solid $red;
  }

  li {
    order  : 1;
    @include rem-size(14);
    padding: 5px 10px;
    color  : $darkblue;

    &:focus,
    &:hover {
      background: $lightblue;
    }
  }

  .isHide {
    pointer-events: none;
    opacity       : .3;
    order         : 2;
  }
}

.linkbox__link-target {
  margin-top: 40px;

  .m_label {
    display: flex !important;
  }
}

.helper__body {
  max-height: 400px;
  overflow  : auto;
}

.editMode {
  padding       : 5px;
  background    : $mediumgrey;
  border-radius : 3px;
  color         : $darkblue;
  text-transform: uppercase;
  position      : absolute;
  @include rem-size(12);
  font-weight   : 600;
  cursor        : pointer;

  pointer-events: none;
  opacity       : 0;

  &:hover {
    color: $red;
  }

  &.show {
    pointer-events: auto;
    opacity       : 1;
  }
}

#m-composer,
#postbox-container-2 {
  position: relative;
}

.helper,
.iframe {
  &:focus &__container {
    border    : 1px solid $red;
    border-top: 1px solid $red;
  }
}

.helper__container,
.iframe__container {
  border: 1px solid $lightblue;

}