.view {
  .views-row ~ .views-row {
    margin-top: 2.2rem;
  }

  &.view--block,
  &.view--spaced-list {
    &:not(.view--flex-grid-2):not(.view--flex-grid-3):not(.view--flex-grid-4):not(.view--flex-grid-5) {
      .view-header + .view-attachment,
      .view-header + .view-content,
      .views-row ~ .views-row,
      .view-footer {
        margin-top: 2rem;

        .region-content & {
          margin-top: 3rem;
        }
      }

      .flex-grid-2 + .view-footer {
        margin-top: 4rem;
      }
    }
  }

  &.view--rule-separated {
    .views-row ~ .views-row {
      margin-top: 2.2rem;
      padding-top: 2.2rem;
      border-top: $border;
    }
  }

  .dropdown-menu & {
    .view-footer {
      margin-top: 2rem;
    }
  }

  .views-view-grid {
    .grid-row {
      ~ .grid-row {
        margin-top: $row-spacing;
      }
    }
  }
}

body .view-title {
  display: flex;
  justify-content: space-between;
  border-bottom: $border;
  margin-top: 6rem;
  margin-bottom: 4.4rem;
  padding-bottom: 1rem;

  @include at-media('desktop') {
    h2 {
      font-size: 4rem;
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      border-bottom: 0 !important;
    }
  }
}

.views-field {
  .layout-sidebar-first &,
  .layout-sidebar-second & {
    ~ .views-field {
      margin-top: 2rem;
    }

    > .views-label {
      margin-bottom: 1rem;
      font-weight: 500;
    }
  }
}

// View Featured.
.view--featured-item {
  .view__content {
    @extend .block-type-cta;

    .view-header {
      div.label {
        margin-top: -2rem;
        margin-bottom: 2rem;
      }
    }

    .node-title {
      margin-top: 1rem;
      font-size: 3.4rem;
      max-width: 50ex;
    }

    p {
      font-family: $theme-font-type-sans;
      font-size: 1.5rem;
      line-height: 1.625;
      margin-top: 2rem;
    }

    @include at-media('desktop') {
      padding: 6rem;

      .node-title {
        font-size: 4.4rem;
      }

      p {
        font-size: 1.6rem;
      }

      .group-flag .group-left {
        width: 140px;
        min-width: 140px;
      }
    }
  }
}

// Comments view.
.view--comments {
  @extend %vertical-spacing-padding;
  background: $lightblue;

  .count {
    font-weight: bold;
    color: #1a4480;
  }

  > .view__content {
    @extend %center;
    max-width: calc(82rem + 12rem);
    background: $white;
    padding: 6rem;
  }
}

.filtered-views-search {
  margin-bottom: 4rem;
  display: flex;
  width: 100%;
  @include search-large;
}

// View Page.
.view--page {
  .view-header {
    margin-bottom: 4rem;
  }

  .grid-row {
    position: relative;
  }

  @include breakpoint($desktop, max-width) {

    input[type="search"] {
      &::placeholder,
      &::-webkit-input-placeholder {
        color: transparent;
      }
    }

    .page-views-columns {
      display: block;

      .sidebar {
        width: 100%;
        padding-bottom: 2rem;

        .main {
          margin-top: $row-spacing;
        }
      }

      .main {
        .view-content + .view-results-info {
          width: 100%;
          display: block;
        }
      }
    }
  }

  .sidebar + .main {
    @include breakpoint($desktop) {
      margin-left: 6rem;
    }
  }

  .main {
    //background: $lightblue;
    padding: 4rem 0;
    position: relative;
    width: 100%;

    .view-content {
      .views-row {
        background: $white;
        padding: 3rem;

        ~ .views-row {
          margin-top: 2rem;
        }
      }
    }

    @include breakpoint($desktop) {
      flex: 0 1 auto;
      width: calc(75% - 6rem);
    }

    @include breakpoint($tablet, max-width) {
      margin-left: -2.8rem;
      margin-right: -2.8rem;
      width: auto !important;
      padding: 3rem;

      .view-content .views-row {
        padding: 2rem;
      }
    }

    .view-results-info {
      display: flex;
      font-size: 1.4rem;

      @include breakpoint($tablet, max-width) {
        display: block;
      }

      &:first-child {
        margin-bottom: 4rem;
      }

      &:last-child {
        margin-top: 4rem;
      }

      > div {
        &:first-child {
          flex: 1;
        }

        ~ div {
          margin-left: 1rem;

          @include breakpoint($tablet, max-width) {
            margin-left: 0;
          }
        }

        select {
          border: 0;
          background: transparent;
          padding-top: 0;
          padding-bottom: 0;
        }
      }
    }
  }

  .content--no-sidebar & {
    .page-views-columns {
      @include breakpoint($desktop) {
        position: relative;

        &:before {
          content: '';
          //background-color: $lightblue;
          position: absolute;
          top: 0;
          left: 50%;
          right: 50%;
          bottom: 0;
          width: auto;
          margin-right: -50vw;
          margin-left: -50vw;
        }
      }
    }

    &.view--page-with-filters {
      .page-views-columns {
        @include breakpoint($desktop) {
          &:before {
            margin-left: 0;
          }
        }

        .sidebar {
          @include breakpoint($desktop) {
            @include grid-col(3);
          }
        }

        .main {
          padding: 4rem;
        }
      }
    }
  }

  body.theme--bo-uswds & {
    .page-views-columns {
      @include breakpoint($desktop) {
        position: relative;

        &:before {
          display: none;
        }
      }
    }
  }

  .content--sidebar-first & {
    .page-views-columns {
      @include breakpoint($desktop) {
        position: relative;

        &:before {
          content: '';
          background-color: $lightblue;
          position: absolute;
          top: 0;
          //left: 50%;
          bottom: 0;
          width: 60vw;
        }
      }
    }

    .main {
      @include breakpoint($tablet) {
        padding: 4rem;
      }

      @include breakpoint($desktop) {
        width: 100%;
        margin-left: 0;
      }
    }
  }

  &.no-background-table-view-page,
  &.view-taxonomy-term__page_3 {
    .page-views-columns {
      &:before {
        display: none;
      }

      .main {
        background-color: transparent;
        padding-top: 0;

        table.usa-table {
          margin-top: 0;

          div.file--mime-application-pdf,
          div.file {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

form.views-exposed-form {
  .views--exposed-sort,
  .views--exposed-show {
    .js-alt-filters--enabled & {
      display: none;
    }
  }

  .form-item-search {
    .js-alt-edit--search & {
      display: none;
    }
  }

  input[type="submit"].usa-button {
    @include at-media("mobile") {
      width: 100%;
    }
  }

  .usa-accordion__content {
    padding: 1.6rem 0 0;
    border: 0;
  }
}

.applied-filters {
  .applied-filters--heading {
    .style-as-h2 {
      @extend h2;
      font-family: $sans;
      font-size: 1.8rem;
      font-weight: bold;

      + a {
        margin-left: 1rem;
      }
    }
  }

  .applied-filters--content {
    background-color: $owhite;
    margin-top: 1rem;
    padding: 1.5rem 2rem;
    font-size: 1.4rem;
  }
}

.region-content .block-views-blockftc-taxonomy-block-1 {
  margin-bottom: $row-spacing;
}

.view-coronavirus-response__block_1 {
  li {
    margin-top: 2rem;
  }
}

.block-content--type-curated-content-list.block-content--75 > .block-content__content > .field--name-field-body {
  max-width: unset;
  p {
    max-width: unset;
  }
}

.block-content--type-curated-content-list.block-content--77 > .block-content__content > .field--name-field-body {
  max-width: unset;
  p {
    max-width: unset;

  }
}

.view-content-table-listing .page-views-columns .view-content {

  display: flex;
  width: 100%;
  flex-wrap: wrap;

  .item-list {
    width: 100%;
    display: table-cell;
    border: 1px solid #dbdbdb;
    margin-right: -1px;
    margin-top: -1px;

    h3 {
      padding: 0.5rem 1rem;
      font-size: 1.6rem;
      font-family: $sans;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;

      li {
        padding: 0.5rem 1rem;
        border-top: 1px solid #dbdbdb;
        font-size: 1.4rem;
      }
    }
  }
}

@media (max-width: 1023px) {
  .view-content-table-listing .page-views-columns .view-content {

    .item-list + .item-list {
      margin-top: 2rem;
    }

    li {
      width: 100%;
      max-width: 100%;
    }
  }
}

@media (min-width: 1024px) {
  .view-content-table-listing .page-views-columns .view-content {

    .item-list {
      width: 33%;
    }
  }
}