@include export-module('co-catalog-filter-layout') {
  .co-catalog-filter {
    font-family: $co-catalog-filter-font-family;
    font-size: $co-catalog-filter-font-size;
    display: flex;
    height: 100%;
    width: $ca-filter-panel-width;
    padding: 10px; //TODO VARIABELE MAKEN
    flex-direction: column;
    position: relative;
    overflow: hidden;
    .catalog-filter-wrapper {
      display: flex;
      flex-direction: column;
    }

    .preset-button {
      display: flex;
      flex-direction: row;
      justify-content: end;
    }

    .catalog-category-filter-wrapper {
      display: flex;
      overflow-x: hidden;
      overflow-y: auto;
      padding-top: 10px; //TODO VARIABELE MAKEN
      height: 100%;
      scroll-behavior: smooth;
    }

    .reset-filter-wrapper {
      display: flex;
      flex-direction: column;
      margin: $co-catalog-filter-reset-filter-margin;
      .reset-title-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }
      .reset-title {
        display: flex;
        align-items: center;
      }
      .reset-filter-icon {
        cursor: pointer;
        height: 26px;
        width: 26px;
        padding: 8px;
      }
      .filter-reset {
        cursor: pointer;
        font-size: $co-catalog-filter-reset-filter-font-size;
      }
    }
    .filter-items-wrapper {
      display: flex;
      flex-direction: column;
      flex-basis: 100%;
      width: 100%;
      row-gap: $ca-filter-panel-row-gap;
      overflow-y: auto;
      .co-filter-item {
        margin-top: 15px;
      }
    }
    .price-inputs {
      display: flex;
      align-items: center;
      column-gap: $co-catalog-filter-column-gap;
    }

    .co-dialog {
      .co-dialog-wrapper {
        width: 600px;
        min-height: 200px;
        max-height: 500px;

        .save-dialog-contents {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10px;

          .co-input-text{
            width: 100%;
          }
          .co-list-of-values{
            width: 100%;
          }
        }
      }
    }
  }
}
