.describe-columns {
  @include clearfix;

  margin: 10px;

  & > div {
    @include make-sm-column(6);
    @include make-md-column(4);
    @include make-lg-column(3);

    @media (min-width: 2436px) {
      width: 400px;
    }

    padding: 10px;

    & > .inner {
      height: 320px;
      overflow: hidden;
      position: relative;

      @include box-shadow(0 0 0 2px rgba($grey, 0.1));

      header {
        @include dark-module;

        padding: $padding-large-vertical $grid-gutter-width/2;

        .toggle {
          float: right;

          @include switch;

          margin-top: 2px;
          margin-right: -2px;
        }

        .remove {
          color: #fff;
          background-color: transparent;
          border: none;
          outline: none;
          padding: 0;
          float: right;
          margin-right: -3px;
          margin-top: -1px;

          svg {
            width: 22px;
            height: 22px;
            fill: currentColor;
          }
        }

        h3 {
          margin: 0;
          font-size: 17px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .description {
          display: block;
          font-size: 14px;
          color: inherit;
          opacity: 0.8;

          &.add {
            opacity: 0.5;
          }
        }
      }

      .preview {
        background-color: $dark-grey;
        font-size: 14px;
        padding: 10px 10px 0;
        opacity: 0.75;

        @include transition(opacity, 0.5s, ease-out);

        &:not(.empty):hover {
          opacity: 1;

          & + .field-info {
            bottom: -120px;
          }
        }

        ol {
          display: table;
          width: 100%;
          padding: 0;
          margin: 0;
          counter-reset: section;
          border: solid 1px darken($light-grey, 3%);
          border-radius: $border-radius-base;
          background-color: rgba(#fff, 0.9);
        }

        li {
          display: table-row;

          &::before {
            display: table-cell;
            counter-increment: section;
            content: counter(section);
            width: 30px;
            text-align: center;
            border-bottom: solid 1px darken($light-grey, 3%);
            border-right: solid 1px darken($light-grey, 3%);
            color: rgba($grey, 0.7);
          }

          span {
            display: table-cell;
            border-bottom: solid 1px darken($light-grey, 3%);
            padding: 3px 8px 1px;
            color: rgba($grey, 0.7);
          }

          &:first-child {
            span {
              padding-top: 6px;
            }
          }
        }

        &.empty {
          width: 100%;
          text-align: center;

          span {
            color: rgba(#fff, 0.5);
            display: block;
            padding-top: 30px;
          }
        }
      }

      .constant {
        textarea {
          width: 100%;
          padding: 36px 10px 0;
          text-align: center;
          background-color: rgba($dark-grey, 0.75);
          outline: 0;
          border: none;
          resize: none;
          color: #fff;
          height: 100px;

          @include transition(background-color, 0.5s, ease-out);

          &:hover {
            background-color: rgba($dark-grey, 0.8);
          }

          &:focus {
            background-color: $dark-grey;
          }
        }
      }

      .field-info {
        padding: 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;

        @include transition(bottom, 0.5s, ease-out);

        label {
          display: block;
          font-size: 12px;
          opacity: 0.5;
          margin-top: $grid-gutter-width/2;
          margin-bottom: 0;
          padding-left: 5px;
          padding-right: 5px;

          &:first-child {
            margin-top: 5px;
          }
        }

        input {
          @include minimal-field;
        }

        textarea {
          @include minimal-textarea;
        }

        &::before {
          content: '';
          display: block;
          height: 15px;

          @include gradient-vertical(transparent, rgba($dark-grey, 0.1), 0%, 100%);

          position: absolute;
          width: 100%;
          top: -15px;
          left: 0;
          pointer-events: none;
        }
      }
    }

    .data-type-select {
      visibility: hidden;
      top: 100%;
      bottom: auto;
      left: 20px;
      right: 20px;
      margin-top: -21px;
      z-index: 999;
      position: absolute !important;
      background-color: #fff;
      border: solid 1px $primary-colour;
      border-top-width: 2px;
      border-radius: 0 0 $border-radius-base $border-radius-base;
      overflow: hidden;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

      .mm-navbar {
        border-color: $light-grey;
        font-size: 12px;
        font-weight: 500;
      }

      .mm-panel {
        &::after {
          height: 0;
        }
      }

      .mm-listview {
        margin-bottom: 0;
        font-weight: 500;

        li {
          &::after {
            left: 0;
          }
        }

        .separator {
          display: none;
        }

        small {
          font-size: 12px;
          display: block;
          font-weight: 400;
        }
      }
    }

    &.disabled {
      opacity: 0.5;

      & > div {
        @include box-shadow(none);

        background-color: $dark-grey;
      }
    }

    &.add {
      & > div {
        display: table;
        border: dashed 2px $light-grey;
        text-align: center;
        width: 100%;
        background-color: transparent;

        @include box-shadow(none);

        &:hover {
          border-color: $primary-colour;
        }

        & > a {
          display: table-cell;
          vertical-align: middle;
          color: darken($light-grey, 10%);
          text-decoration: none;

          svg {
            width: 100%;
            height: 30px;
            fill: currentColor;
          }

          &:hover {
            color: $primary-colour;
          }
        }
      }
    }

    &.complete {
      & > div {
        //@include box-shadow(0 0 0 2px $primary-colour);
      }
    }

    &.data-type-select-active {
      .data-type-select {
        visibility: visible;
      }
    }

    &.mm-wrapper {
      overflow: visible;
    }
  }
}