@include export-module('co-catalog-search-layout') {
  .co-catalog-search {
    font-family: $co-catalog-search-font-family;
    display: flex;
    flex-direction: column;
    width: 100%;
    //height: 100%;

    .catalog-search-wrapper {
      display: flex;
      width: 100%;
      column-gap: $co-catalog-search-column-gap;
    }
    .view-modes-wrapper {
      display: flex;
      gap: 0;
      justify-content: flex-end;
      padding: $co-catalog-search-view-modes-padding;
      co-button {
        width: $co-catalog-search-view-modes-button-size;
        height: $co-catalog-search-view-modes-button-size;
        border-radius: $co-catalog-search-view-modes-button-radius;
        &.selected {
          background-color: $co-catalog-search-view-modes-button-background;
          svg [fill] {
            fill: #FFFFFF;
          }
        }
      }
    }
    .search-content-wrapper {
      display: flex;
      flex-basis: 100%;
      flex-direction: column;
    }
    .search-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .search-catalog-title-wrapper {
        flex: 1;
        .catalog-title-wrapper {
          display: flex;
          align-items: center;
          column-gap: $co-catalog-search-title-column-gap;
          .co-icon {
            height: $co-catalog-search-title-icon-size;
            width: $co-catalog-search-title-icon-size;
          }
        }
        .catalog-title {
          font-size: $co-catalog-search-title-font-size;
          font-weight: $co-catalog-search-title-font-weight;
        }
        .catalog-sub-title {
          font-size: $co-catalog-search-sub-title-font-size;
          font-weight: $co-catalog-search-sub-title-font-weight;
        }
      }
      .co-catalog-search-header {
        flex: 2;
        align-self: flex-start;
        .catalog-search-header-wrapper {
          padding: 20px 0;
          .catalog-search-filter-icon {
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    .search-content {
      display: flex;
      flex-basis: 100%;
      overflow: $co-catalog-search-content-overflow;
      padding: $co-catalog-search-content-padding;
      position: relative;
      .article-cards {
        padding: 0 0 40px 0;
      }
    }
    .filter-content {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow: hidden;
    }
    .search-filter-panel-header-wrapper {
      display: flex;
      justify-content: space-between;
      .co-icon {
        cursor: pointer;
        height: $co-catalog-search-filter-title-icon-size;
        width: $co-catalog-search-filter-title-icon-size;
      }
    }
    .search-filter-panel-header {
      display: flex;
      column-gap: 10px;
      align-items: center;
      font-size: $co-catalog-search-filter-title-font-size;
      font-weight: $co-catalog-search-filter-title-font-weight;
      .reset-filter-text {
        font-size: $co-catalog-search-filter-reset-font-size;
        font-weight: $co-catalog-search-filter-reset-font-weight;
      }
    }
  }
}