@include export-module('co-search-header-buttons-layout') {
  .co-search-header-buttons {
    .search-header-buttons-wrapper {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    .upper-header {
      display: flex;
      justify-content: flex-end;
      height: $co-search-result-upper-header-height;
      padding-left: $co-search-result-upper-header-padding-left;

      .header-buttons-wrapper {
        display: flex;
        padding: $co-search-result-header-buttons-wrapper-padding;
      }
    }

    .button-wrapper {
      cursor: pointer;
    }

    .toggle-sidebar-button {
      height: $co-search-result-header-sidebar-button-size;
      width: $co-search-result-header-sidebar-button-size;
      padding: 0;

      &:not(.circle).has-icon {
        padding-left: 0;
      }

      .co-icon {
        width: $co-search-result-header-sidebar-icon-size;
        height: $co-search-result-header-sidebar-icon-size;
      }

      &.fullscreen {
        height: $co-search-filter-button-icon-size;
        width: $co-search-filter-button-icon-size;

        .co-icon {
          width: $co-search-filter-button-icon-size;
          height: $co-search-filter-button-icon-size;
        }
      }
    }

    .search-filter-button {
      height: $co-search-filter-button-size;
      width: $co-search-filter-button-size;
      border-radius: $co-search-filter-button-border-radius;
      //padding: $co-search-filter-button-padding;
      justify-content: center;

      .co-icon {
        width: $co-search-filter-button-icon-size;
        height: $co-search-filter-button-icon-size;
      }
    }

    .close-search-button-wrapper {
      display: flex;
      column-gap: $co-search-result-header-search-button-wrapper-column-gap;

      &.sidebar {
        margin-bottom: 5px;

        .toggle-sidebar-button {
          justify-content: center;
          width: $co-search-result-header-sidebar-button-size;
          height: $co-search-result-header-sidebar-button-size;

          co-icon {
            height: $co-search-result-header-sidebar-close-button-size;
            width: $co-search-result-header-sidebar-close-button-size;
          }
        }
      }
    }


    .header-searchbar-wrapper {
      display: flex;
      justify-content: center;
      flex-direction: row;
      align-items: center;
      column-gap: $co-search-header-column-gap;

      .header-searchbar-title {
        font-size: $co-search-header-label-font-size;
        font-weight: $co-search-header-label-font-weight;
      }
    }

    .header-search-bar-button-wrapper {
      display: flex;
      align-items: center;
      column-gap: $co-search-header-button-wrapper-column-gap;
    }

    .search-header-content-wrapper {
      &.fullscreen {
        co-input-text {
          width: $co-search-input-text-fullscreen-width;
          transition: width 0.2s ease-in-out;
        }
      }

      &.sidebar {
        co-input-text {
          width: $co-search-input-text-sidebar-width;
          transition: width 0.2s ease-in-out;
        }
      }
    }

    .view-mode-buttons-wrapper {
      padding: $co-search-view-modes-wrapper-padding;
    }

    .add-button {
      cursor: pointer;
      height: $co-search-header-plus-button-size;
      width: $co-search-header-plus-button-size;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-style: $co-search-header-plus-button-border-style;
      border-width: $co-search-header-plus-button-border-width;
      border-radius: $co-search-header-plus-button-border-radius;

      .co-icon {
        width: $co-search-header-plus-button-icon-size;
        height: $co-search-header-plus-button-icon-size;
      }

      svg {
        width: 90%;
        height: 90%;
      }

      &:not(.circle).has-icon {
        padding-left: 0;
      }
    }
  }
}