:root {
  --webien-search-loader-position: top center; // Will change with js when list appends
}

.webien-search-result {
  position: relative;

  >.result {
    display: none;
    opacity: 1;
    transition: opacity 0.2s ease;

    .item {
      display: block;
      margin-bottom: 20px;
      width: 100%;
    }

    &.active {
      display: flex;
      flex-wrap: wrap;
    }

  }

  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0);
    background-image: url('images/preloader.svg');
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: var(--webien-search-loader-position);
    transition: opacity 0.2s ease;
    pointer-events: none;
    opacity: 0;
  }

  &.loading {
    >.result {
      opacity: 0.2;
    }

    &:after {
      opacity: 1;
    }
  }

  // Columns
  @for $i from 1 through 5 {
    &.col-mobile-#{$i}{
      .item{
        width: 100% / $i;
        @if $i > 1 {
          padding: 0 10px;
        }
      }
    }
  }
  @for $i from 1 through 5 {
    &.col-tablet-#{$i}{
      @media (min-width: 768px) {
        .item{
          width: 100% / $i;
          @if $i > 1 {
            padding: 0 10px;
          }
        }
      }
    }
  }
  @for $i from 1 through 5 {
    &.col-desktop-#{$i}{
      @media (min-width: 1200px) {
        .item{
          width: 100% / $i;
          @if $i > 1 {
            padding: 0 10px;
          }
        }
      }
    }
  }
}


.webien-search-filter {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  @media (min-width: 768px) {
    &.text-align-center {
      align-items: center;
    }
    &.text-align-right {
      align-items: flex-end;
    }

    &.lineup-horisontal {
      flex-direction: row;

      &.text-align-center {
        justify-content: center;
      }
      &.text-align-right {
        justify-content: flex-end;
      }
    }

    &.show-as-tabs.lineup-horisontal {
      a.pt {
        border: solid transparent;
        border-bottom-style: none !important;
        position: relative;
        outline: none;

        &.active {
          border-style: solid;

          &:before,
          &:after {
            display: block;
            content: "";
            position: absolute;
            right: 100%;
            bottom: 0;
            height: 0;
            width: 999em;
            border-bottom-style: solid;
            border-color: inherit;
          }
          &:after {
            left: 100%;
          }
        }


      }
    }

  }

  a.pt {
    padding: 10px 15px;
    white-space: nowrap;

    &.active {
      font-weight: bold;
    }
  }



}

body:not(.elementor-editor-active) {
  .webien-search-result {
    >.result {
      // set to equal hights in grid
      .item {
        >.elementor-element-template,
        >.elementor-element-template > .elementor-widget-container,
        >.elementor-element-template > .elementor-widget-container > .elementor-template,
        >.elementor-element-template > .elementor-widget-container > .elementor-template >.elementor,
        >.elementor-element-template > .elementor-widget-container > .elementor-template >.elementor >.elementor-inner,
        >.elementor-element-template > .elementor-widget-container > .elementor-template >.elementor >.elementor-inner >.elementor-section-wrap,
        >.elementor-element-template > .elementor-widget-container > .elementor-template >.elementor >.elementor-inner >.elementor-section-wrap >.elementor-section,
        >.elementor-element-template > .elementor-widget-container > .elementor-template >.elementor >.elementor-inner >.elementor-section-wrap >.elementor-section >.elementor-container,
        >.elementor-element-template > .elementor-widget-container > .elementor-template >.elementor >.elementor-inner >.elementor-section-wrap >.elementor-section >.elementor-container >.elementor-row {
          height: 100%;
        }
      }
    }
  }

}