@import "../../../style/mixin";

@include export-module('co-filter-item-layout') {
  .co-filter-item {
    display: block;
    font-family: $cc-co-filter-item-font-family;
    font-size: $cc-co-filter-item-font-size;
    border-radius: $cc-co-filter-item-border-radius;
    .co-collapsible {
      width: $cc-co-filter-item-collapsible-width;

      .collapsible-title {
        font-family: $cc-co-filter-item-header-font-family;
        font-size: $cc-co-filter-item-header-font-size;
        font-weight: $cc-co-filter-item-header-font-weight;
        padding: $cc-co-filter-item-header-padding;
      }

      .collapsible-content {
        padding: $cc-co-filter-item-collapsible-content-padding;
        position: relative;
      }

      .expand-icon-wrapper {
        .expand-icon {
          height: $cc-co-filter-item-header-icon-size;
          width: $cc-co-filter-item-header-icon-size;
        }
      }
      .collapsible-header {
        .collapsible-button {
          border-color: $cc-co-filter-item-collapsible-header-search-border;
          color: $cc-co-filter-item-collapsible-header-search-color;
          &:hover {
            background: $cc-co-filter-item-collapsible-header-search-hover-background;
            color: $cc-co-filter-item-collapsible-header-search-hover-color;
          }
        }
      }
    }
    .filter-loader {
      width: 20px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      position: absolute;
      right: 20px;
      top: 3px;
      align-items: center;
    }

    .filter-loader::before, .filter-loader::after, .filter-loader span {
      content: '';
      width: 4px;
      height: 4px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      animation: bounce 1s infinite;
    }

    .filter-loader::after {
      animation-delay: 0.2s;
    }
    .filter-loader span {
      animation-delay: 0.4s; /* Delay for the third dot */
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }

    .co-filter-item-collection-content {
      .no-results {
        display: flex;
        align-items: center;
        height: $cc-co-filter-item-no-results-height;
      }
    }

    .co-filter-item-slider-content {
        display: flex;
        align-items: center;
        flex-direction: row;
        column-gap: $cc-co-filter-item-collection-gap;
    }


    .co-filter-item-collection-results, .co-filter-item-custom-content {
      display: flex;
      flex-direction: column;
      row-gap: $cc-co-filter-item-collection-gap;
      margin: $cc-co-filter-item-collection-results-margin;
    }

    .co-filter-item-collection-result-item {
      display: flex;
      align-items: center;

      .co-filter-item-amount {
        display: flex;
        align-items: center;
        height:$cc-co-filter-item-amount-height;
        font-size: $cc-co-filter-item-collection-result-item-amount-font-size;
        opacity: $cc-co-filter-item-collection-result-item-amount-opacity;
        margin:$cc-co-filter-item-amount-margin;
      }
    }
    .co-radio-button {
      height: auto;
      padding: 0;
      border: none;
    }

    a {
      display: flex;
      align-items: center;
      cursor: pointer;

      co-icon {
        transform: translateX(-7px);
      }
    }
  }
}
