department-of-veterans-affairs/vets-website

$formation-image-path: "~@department-of-veterans-affairs/formation/assets/img";

@import "~@department-of-veterans-affairs/formation/sass/shared-variables";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-nav-sidebar";

.outreach-asset-form-filters {
  background: var(--vads-color-base-lightest);
}
.va-sidebarnav .left-side-nav-title h4 {
  width: 100%;
}
.asset-component-library {
  .asset-card {
    height: 388px;
    float: left;
    display: none;

    @media (min-width: $medium-screen) {
      height: 184px;
    }
    @media (min-width: $large-screen) {
      height: 388px;
      &.large-screen\:vads-l-col--6 {
        max-width: 48.35%;
      }
    }

    .card-inside-wrap {
      background: var(--vads-color-base-lightest);
      height: 100%;
    }
    &.show-type {
      display: block;
      &.hide-topic {
        display: none;
      }
      &.pager-hide {
        display: none;
      }
    }
    &.show-topic {
      display: block;
      &.hide-type {
        display: none;
      }
      &.pager-hide {
        display: none;
      }
      @media (min-width: $medium-screen) {
        //height: 224px;
        height: 100%;
      }

      @media (min-width: $large-screen) {
        height: 388px;
      }

    }
    &.hide-topic {
      display: none;
    }
    &.hide-type {
      display: none;
    }

    .asset-head-wrap {
      height: 148px;
      width: 100%;
      overflow: hidden;
      background-size: contain;
      img {
        margin: 0;
        display: block;
        width: 100%;
        height: 148px;
        object-fit: cover;
      }
    }
    .asset-body-wrap {
      height: 214px;

      @media (min-width: $medium-screen) {
        height: 100%;
      }

      @media (min-width: $large-screen) {
        height: 214px;
      }

      .asset-body-text,
      .asset-category-text,
      .asset-filetype-text {
        padding-bottom: 12px;
      }
      .capitalize-first {
        text-transform: capitalize;
      }
    }
  }
  .va-c-margin-top--auto {
    margin-top: auto;
  }
}

button.va-page-numbers {
  border-radius: 1000px;
  display: inline-block;
  height: 1.875rem;
  margin: 0 0.3125rem;
  width: 1.875rem;
  text-decoration: none;
  line-height: 2;
  font-size: inherit;
  padding: inherit;
  font-weight: inherit;
}

#no-results {
  display: none;
}

/*
Currently, necessary combination of classes in formation
is not available to accomplish styling / layout
needed for card tablet view (i.e., adding one class might
cover one scenario, however, it would result in a new styling issue).
Only way to accomplish everything required is with this method.
*/
@media (min-width: $medium-screen) and (max-width: $large-screen) {
  .asset-card {
    &.medium-card-utility {
      margin-bottom: 25px;
      min-height: 0;
      .medium-head-utility {
        background: none;
        max-width: none;
        display: block;
        float: left;
        width: 33%;
        height: 100%;
        img {
          height: 110px;
        }
      }
      .medium-body-utility {
        float: right;
        display: block;
        width: 66%;
        background: none;
        padding-top: 0 !important;
      }
    }
  }
}