/*------------------------------------*\
  $CONTENT
\*------------------------------------*/

$highlights-background-color: #f6f6f6;
$homepage-background-color: #fff;

/**
 * Main page wrapper
 */
.page-content {
  overflow: hidden;
  border: 1px solid #d9d9d9;

  background: #E0E0E0;

  @include mq(mq960) {
    background: linear-gradient(to right, #EDEDED 0%, #EDEDED 35%, #E0E0E0 35%, #E0E0E0 100%);
    display: flex;
  }

  @include mq(mq1200) {
    background: linear-gradient(to right, #EDEDED 0%, #EDEDED 25%, #E0E0E0 25%, #E0E0E0 100%);
  }

  .primary-content {
    padding: 20px;

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

    @include mq(mq960) {
      padding: 30px;
      float: left;
      width: 65%;
    }

    @include mq(mq1200) {
      width: 75%;
    }

    > h1 {
      background: $white;
      border-radius: 6px 6px 0 0;
      padding: 20px;
      margin: 0;

      border: {
        bottom: 2px solid #D0D0D0;
      }

      font: {
        size: font-size(32);
        weight: normal;
      }

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

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

    > section,
    > form {
      margin: 0;
      background: $white;
      border-radius: 0 0 6px 6px;
      padding: 20px;

      max-width: 100%;

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

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

    .page-list {
      margin: {
        left: 0;
      }

      ul {
        &[data-state="hidden"] {
          display: none;
        }
      }

      li {
        background: {
          image: image-url('template/admin/list-icon.png');
          repeat: repeat-x;
          position: 0 15px;
        }
        margin: 0px;
        padding: {
          top: 5px;
          bottom: 5px;
          left: 10px;
        }

        list-style: none;
        border-left: 1px solid #EDEDED;

        position: relative;

        &:last-child {
          padding: {
            bottom: 0;
          }
        }
      }

      a, span {
        background: $white;
        padding: 0 10px;

        &.actions {
          float: right;
          margin: 0;
        }
      }

      .btn--collapse {
        padding: 0;

        position: absolute;
        top: 5px;
        left: -10px;
        border: 1px solid #EDEDED;
        background: {
          color: $white;
          image: image-url('template/admin/minus.png');
          size: 10px 10px;
          position: 50% 50%;
          repeat: no-repeat;
        }

        width: 20px;
        height: 20px;

        .ie9 & {
          display: none;
        }

        &[data-js="1"] {
          display: none;
        }

        &[data-state="collapsed"] {
          background: {
            image: image-url('template/admin/plus.png');
          }
        }

      }
    }
  }
}

.content--inner-wrapper {
  position: relative;
}

.tabs,
.static-tabs {
  width: 100%;
  display: block;
  margin: {
    left: 0;
    bottom: 20px;
  }
  padding: {
    left: 2px;
  }

  @extend %cf;

  border: {
    bottom: 2px solid #E6E6E6;
  }

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

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

  li {
    list-style: none;
    float: left;
    margin: {
      bottom: 0;
      right: 2px;
    }

    a,
    button,
    .btn {
      float: left;
      background: #EDEDED;
      //padding: 10px 15px;
      cursor: pointer;
      border-radius: 6px 6px 0 0;
      color: $brand;
      font-weight: bold;
      text-decoration: none;
      border: 0;

      &.active,
      &:hover,
      &:focus {
        background: #E6E6E6;
      }

      &[data-active="true"] {
        background: #fff;
        padding: 13px 18px 15px;
        border: 2px solid #E6E6E6;
        border-bottom: 2px solid #fff;
        margin: {
          bottom: -2px;
        }
        cursor: default;
      }
    }

  }
}

.summaries {
  margin: 0;

  li {
    list-style: none;
    overflow: hidden;

    div {
      width: 100%;
      max-width: 600px;
      overflow: hidden;

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

      @include mq(mq1200) {
        margin: 0;
        float: left;
      }
    }

    fieldset {
      margin: {
        bottom: 10px;
      }

      @include mq(mq600) {
        line-height: 40px;
      }

      @include mq(mq1200) {
        line-height: inherit;
        padding: 10px;
      }

      input {
        width: auto;
        float: left;
        margin: {
          bottom: 0;
        }
      }

      label {
        width: auto;
        float: left;
        line-height: 1.2;
      }

      @include mq(mq1200) {
        margin: 0;
      }
    }

    input, select {
      margin: {
        bottom: 10px;
      }

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

        float: left;
      }
    }

    @include mq(mq600) {
      select {
        width: 43%;
        margin: {
          right: 2%;
        }
      }

      input {
        width: 10%;
      }
    }
  }

  .message-text--error {
    display: none;
    //clear: both;
    //margin: {
    //  top: 0;
    //}
    //padding: {
    //  top: 10px;
    //}
  }
}

.tip {
  background: #EDEDED;
  padding: 10px;
  border-radius: 6px;
  font: {
    size: font-size(13);
    variant: italic;
  }
  max-width: 600px;

  &--warning {
    background: #f0ad4e;
    color: #fff;
  }

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

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

}

/**
 * Items that can be added through the CMS e.g. downloads, images etc
 */
.content-item {
  /**
   * A download item
   */
  &__download {
    margin-bottom: $base-spacing-unit;

    h3 {
      margin-bottom: 5px;
      font-size: font-size(15);
    }

    p {
      margin-bottom: 0;
    }

    a {
      text-decoration: none;

      @include states {
        text-decoration: underline;
      }
    }
  }
}