@include export-module('co-search-filter-panel-layout') {
  .co-search-filter-panel {
    font-family: $co-search-filter-panel-header-font-family;
    font-size: $co-search-filter-panel-header-font-size;
    width: $co-search-filter-panel-width;
    padding: $co-search-filter-panel-padding;
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: relative;
    border: $co-search-filter-panel-border;
    top: $co-search-filter-panel-top;

  }
  .search-filter-panel-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: $co-search-filter-panel-header-wrapper-padding;

    .search-filter-panel-header {
      display: flex;
      justify-items: flex-start;
      align-items: baseline;
      font-weight: $co-search-filter-panel-header-font-weight;
      font-size: $co-search-filter-panel-header-font-size;
      color: $co-search-filter-panel-header-color;

      co-icon {
        margin-left: $co-search-filter-panel-icon-margin-left;
        height: $co-search-filter-panel-icon-height;
        width: $co-search-filter-panel-icon-width;
      }
    }
  }

  .search-filter-wrapper {
    display: flex;
    min-width: $co-search-filter-wrapper-min-width;

    &.sidebar {
      position: absolute;
      left: 0;
      transition: left 0.2s ease-in-out;
      z-index: 2;
      background: #FFF;
      min-width: $co-search-filter-panel-wrapper-sidebar-min-width;
    }

    &.fullscreen {
      position: relative;
      left: 0;
      transition: left 0.2s ease-in-out;
    }
  }

  .clickable {
    cursor: pointer;
  }
}


