/*------------------------------------*\
  $SORTABLE
\*------------------------------------*/

.actions {
  overflow: hidden;
  margin: {
    bottom: 10px;
  }

  @include mq(mq600) {
    margin: {
      bottom: 15px;
    }
  }

  @include mq(mq960) {
    margin: {
      bottom: 20px;
    }
  }
}

#sortable, #sortable-header-images {
  width: 100%;
  margin: 0;
  margin: {
    bottom: 20px
  }

  @include mq(mq600) {
    margin: {
      bottom: 25px;
    }
  }

  @include mq(mq960) {
    margin: {
      bottom: 30px;
    }
  }

  max-width: 800px;

  > li {
    background: mix($white, #E6E6E6, 75%);
    list-style: none;
    margin: {
      bottom: 1px;
    }
    padding: 20px;
    border-radius: 6px;
    position: relative;
    width: 100%;

    @include mq(mq600) {
      margin: {
        bottom: 2px;
      }
      padding: 25px;
    }

    @include mq(mq600) {
      margin: {
        bottom: 3px;
      }
      padding: 30px;
    }

    &.ui-state-highlight {
      background: mix($brand, $white, 10%);
      height: 99px;
    }

    img {
      width: 100%;
      max-width: 100%;
      height: auto;
    }
  }

  .move {
    display: none;
  }

  .actions {
    background: linear-gradient(45deg, rgba(248,248,248,0.75) 0%, rgba(248,248,248,1) 50%, rgba(248,248,248,1) 100%);
    margin: 0;
    padding: 20px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    z-index: 2;
    border-radius: 0 0 0 6px;

    @include mq(mq600) {
      padding: 25px;
    }

    @include mq(mq960) {
      padding: 30px;
    }

    .btn {
      margin: {
        bottom: 0;
      }
      font: {
        size: font-size(13);
      }
      padding: 7.5px 10px;

      &:last-child {
        margin: {
          right: 0;
        }
      }
    }
  }

  table {
    max-width: 800px;
  }

  .table-container {
    margin: {
      bottom: 20px;
    }
  }

}

.module {
  &.video {
    position: relative;
    padding-bottom: 56.175%;
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;

    iframe,
    object,
    embed,
    video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  }
}