/* Base styles */
.wp-block-sowmedia-facetwp-filters dialog {
    /* Dialog base styles */
    border: none;
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    padding: 0;
    max-width: none;
    width: auto;
    height: auto;
    display: block;
    position: static;
    padding: var(--wp--preset--spacing--50);
}

.wp-block-sowmedia-facetwp-filters dialog:modal {
    max-height: 100vh;
    max-width: 100vw;
}

.wp-block-sowmedia-facetwp-filters__header {
    display: none;
}

.wp-block-sowmedia-facetwp-filters__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.wp-block-sowmedia-facetwp-filters__toggle--open {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
  font-weight: 700;
  justify-content: space-between;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  position: fixed;
  left: var(--wp--preset--spacing--50);
  right: var(--wp--preset--spacing--50);
  width: calc(100% - (2 * var(--wp--preset--spacing--50)));
  bottom: var(--wp--preset--spacing--50);
  z-index: 10;
}

/* Always show content on desktop */
.wp-block-sowmedia-facetwp-filters__content {
    display: flex;
    flex-direction: column;
    gap: 0;

    & > * {
        padding: var(--wp--preset--spacing--20) 0;
    }
}

/* Mobile styles */
@media (max-width: 1023px) {
    .wp-block-columns:has( > .wp-block-column > .wp-block-sowmedia-facetwp-filters ){
      flex-direction: column;
      gap: 0;
    }

    .wp-block-column:has( > .wp-block-sowmedia-facetwp-filters ){
      display: contents;
    }

    .wp-block-sowmedia-facetwp-filters__toggle {
        display: flex;
    }
    .wp-block-sowmedia-facetwp-filters dialog {
        display: none;
        flex-direction: column;
        gap: var(--wp--preset--spacing--50);

        .wp-block-sowmedia-facetwp-filters__toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--wp--preset--color--base);
            color: var(--wp--preset--color--primary);
            padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
        }
    }

    .wp-block-sowmedia-facetwp-filters__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: var( --wp--preset--font-size--medium );
        font-weight: 700;
    }

    .wp-block-sowmedia-facetwp-filters dialog[open] {
        display: flex;
        position: fixed;
        inset: 0;
        margin: 0;
    }    
}

/** FacetWP Styles **/
.facetwp-facet-result_count {
    display: contents;
  }
  
  .facetwp-facet[data-name^='label_']{
    .facetwp-checkbox {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: space-between;
      gap: var(--wp--preset--spacing--20);
      background-image: unset;
      position: relative;
      margin-bottom: var(--wp--preset--spacing--50);
      font-size: var(--wp--preset--font-size--medium);
      font-weight: 700;
      margin: var(--wp--preset--spacing--20) 0;
      &:before {
        width: 51px;
        height: 31px;
        border-radius: 31px;
        background: #EFEFEF;
        border: none;
      }
      &:after {
        content: '';
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: var(--wp--preset--color--base);
        position: absolute;
        top: 2px;
        right: 22px;
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15), 0 3px 1px 0 rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease-in-out;
      }
      &.checked {
        &:before {
          background: var(--wp--preset--color--primary);
        }
        &:after {
          transform: translateX(20px);
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  body .facetwp-facet {
    margin-bottom: 0;
  
    .facetwp-input-wrap {
      width: 100%;
    }
  
    .facetwp-checkbox {
      display: flex;
      align-items: flex-start;
      gap: var(--wp--preset--spacing--20);
      background-image: unset;
      padding-left: 0;
      margin-bottom: var(--wp--preset--spacing--20);
  
      &::before {
        content: '';
        font-family: "icomoon";
        align-items: center;
        justify-content: center;
        display: flex;
        width: 24px;
        min-width: 24px;
        height: 24px;
        border: 1px solid var(--wp--preset--color--base );
      }
  
      &.checked{
        background-image: unset;
  
        &::before {
          content: "\e96e";
          color: var(--wp--preset--color--primary);
        }
      }
  
      .facetwp-counter {
        display: none;
      }
    }
  
    .facetwp-page {
      display: flex;
      padding-top: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      font-size: 0;
      width: 44px;
      height: 44px;
      background-color: var( --wp--preset--color--contrast );
  
      &:hover {
        background-color: var( --wp--preset--color--secondary );
      }
  
      &::before,
      &::after {
        padding-left: 0;
        padding-right: 0;
        width: 24px;
        height: 24px;
      }
    }
  
    &.facetwp-type-search,
    &.facetwp-type-proximity {
      color: var( --wp--preset--color--base );
  
      input, select {
        background: none;
        border: 1px solid var(--wp--preset--color--base);
        color: inherit;
        height: 50px;
        padding: 0 var(--wp--preset--spacing--30);
        padding-right: 40px;
        width: 100%;
        font-size: var(--wp--preset--font-size--normal);
  
        &::placeholder {
          color: var(--wp--preset--color--base);
        }

        option {
          color: var(--wp--preset--color--contrast);
        }
      }

      input.facetwp-location {
        min-width: unset;
      }

      select.facetwp-radius {
        padding: 0 var(--wp--preset--spacing--30);
        width: 150px;
      }
  
      select {
        background: url(../../assets/svg/chevron-down.svg) no-repeat right var(--wp--preset--spacing--20) center;
        background-size: 24px;
        appearance: none; 
      }
  
      .facetwp-icon { 
        opacity: 1;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var( --wp--preset--color--primary );
        font-size: 24px;
        width: auto;
        right: var(--wp--preset--spacing--30);
      }
  
      .facetwp-icon::before {
        background-image: unset;
        content: "\e9e2";
        font-family: "icomoon";
        height: auto;
  
      }
  
      .facetwp-icon.locate-me::before {
        content: "\e9e3";
      }
  
      .facetwp-icon.f-loading::before {
        content: "\e917";
      }
    }
  
    &.facetwp-type-proximity {
      display: flex;
      gap: var(--wp--preset--spacing--40);

      .location-results {
        color: var(--wp--preset--color--contrast);
        z-index: 9;
      }
    }

    &.facetwp-type-reset {
        padding: var(--wp--preset--spacing--60) 0 0 0;
        display: flex;
        justify-content: flex-end;
        button {
            display: flex;
            align-items: center;
            gap: 0;
            overflow: hidden;
            background-color: transparent;
            color: var(--wp--preset--color--base);
            padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
            border: 2px solid var(--wp--preset--color--base);
            font-size: var(--wp--preset--font-size--normal);
            transition: all 0.3s ease-in-out;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;

            &:before,
            &:after {
                content: "\ea43";
                font-family: "icomoon" !important;
                width: calc(24px + 15px);
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease-in-out;
                font-size: var(--wp--preset--font-size--large);
                font-weight: 100;
                color: var(--wp--preset--color--base);
            }

            &:after {
                margin-left: auto;
                padding-left: 15px;
            }

            &:before {
                margin-left: calc(-24px - 15px);
                opacity: 0;
                padding-right: 15px;
                transform: translateX(-24px);
            }

            &:hover {
                background-color: var(--wp--preset--color--secondary);
                border-color: var(--wp--preset--color--secondary);
                color: var(--wp--preset--color--base);

                &:before {
                    opacity: 1;
                    margin-left: 0;
                    transform: translateX(0);
                }

                &:after {
                    opacity: 0;
                    margin-right: calc(-24px - 15px);
                    transform: translateX(24px);
                }
            }

            &:active {
                background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 80%, var(--wp--preset--color--contrast));
                border-color: color-mix(in srgb, var(--wp--preset--color--secondary) 80%, var(--wp--preset--color--contrast));
                color: var(--wp--preset--color--base);
            }
        }

        &.facetwp-hidden {
            display: none;
        }
    }

    &.facetwp-type-slider {
        position: relative;
        .noUi-target {
            background: #EFEFEF;
            border: none;
        }
        .noUi-connect {
            background: var(--wp--preset--color--primary);
        }
        .noUi-handle {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--wp--preset--color--base);
            box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15), 0 3px 1px 0 rgba(0, 0, 0, 0.06);
        }
        .facetwp-slider-wrap {
            padding-bottom: var(--wp--preset--spacing--40);
        }
        .facetwp-slider-reset {
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: transparent;
            font-size: var(--wp--preset--font-size--normal);
            border: 2px solid var(--wp--preset--color--base);
            color: var(--wp--preset--color--base);
            border-radius: 0;
            box-shadow: none;
            &:hover {
                background-color: var(--wp--preset--color--secondary);
                border-color: var(--wp--preset--color--secondary);
                color: var(--wp--preset--color--base);
            }
        }
    }
  }
  
  body .facetwp-selections {
    ul {
      display: flex;
      flex-wrap: wrap;
      gap: var(--wp--preset--spacing--30);
      padding: 0;
    }
  
    li {
      display: contents;
    }
  
    .facetwp-selection-label { display: none }
    .facetwp-selection-value { 
      background-image: unset;
      padding: 5px var(--wp--preset--spacing--20);
      background: var(--wp--preset--color--primary);
      color: var( --wp--preset--color--base);
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
  
      &:hover {
        background: var(--wp--preset--color--secondary);
      }
      &::after {
        content: "\ea43";
        font-family: "icomoon" !important;
        font-size: var(--wp--preset--font-size--medium);
        color: var(--wp--preset--color--base);
        margin-left: 10px;
      }
    }
  }

.facet-collapsible {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.50);
    .facet-toggle-title {
        width: 100%;
        padding: var(--wp--preset--spacing--20) 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: var(--wp--preset--font-size--medium);
        font-weight: 700;
        background-color: transparent;
        border: none;
        color: inherit;
        cursor: pointer;
        transition: opacity 0.3s ease-in-out;
        &:after {
            content: "\ea43";
            font-family: "icomoon" !important;
            transform: rotate(45deg);
            transition: transform 0.3s ease-in-out;
            color: var(--wp--preset--color--primary);
        }
        &:hover {
            opacity: 0.85;
        }
    }
    .facetwp-facet {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }
    &.facet-collapsible--open {
        .facetwp-facet {
            overflow: visible;
        }
        .facet-toggle-title {
            &:after {
                transform: rotate(270deg);
            }
        }
        .facetwp-facet {
            max-height: 1000px; /* Large enough to fit content */
        }
    }
}