/* Integrations directory: search, type pills, and category filters. */

.ap-integrations-refresh__search-wrap {
    position: relative;
}

.ap-integrations-refresh__search-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 16px;
    width: 18px;
    height: 18px;
    display: block;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: translateY(-50%);
    cursor: pointer;
    box-shadow: none !important;
    outline: none;
    background: center / 18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23107EDB' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.25 4.25'/%3E%3C/svg%3E") !important;
}

.ap-integrations-refresh__search-icon:hover,
.ap-integrations-refresh__search-icon:focus,
.ap-integrations-refresh__search-icon:focus-visible,
.ap-integrations-refresh__search-icon:active {
    border: 0 !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
    background: center / 18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23107EDB' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.25 4.25'/%3E%3C/svg%3E") !important;
}

.ap-integrations-refresh__search-icon::before,
.ap-integrations-refresh__search-icon::after {
    content: none !important;
    display: none !important;
}

.ap-integrations-refresh__search {
    padding-left: 50px !important;
    text-indent: 0 !important;
}

/* Sliding active state for All / Inbound / Outbound. No hover treatment. */
.ap-integrations-refresh__type-filters {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.ap-integrations-refresh__type-filters::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 3px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    height: 40px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 0 8px 0 var(--ap-ir-blue);
    transform: translateX(0);
    transition: transform 180ms ease-out;
    pointer-events: none;
}

.ap-integrations-refresh__type-filters:has(.ap-integrations-refresh__type-button:nth-child(2).is-active)::before {
    transform: translateX(100%);
}

.ap-integrations-refresh__type-filters:has(.ap-integrations-refresh__type-button:nth-child(3).is-active)::before {
    transform: translateX(200%);
}

.ap-integrations-refresh__type-button,
.ap-integrations-refresh__type-button:hover,
.ap-integrations-refresh__type-button:focus,
.ap-integrations-refresh__type-button:focus-visible,
.ap-integrations-refresh__type-button:active {
    position: relative;
    z-index: 1;
    background: transparent !important;
    color: #6e7174 !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
    outline: none;
    transition: color 150ms ease-out;
}

.ap-integrations-refresh__type-button.is-active,
.ap-integrations-refresh__type-button.is-active:hover,
.ap-integrations-refresh__type-button.is-active:focus,
.ap-integrations-refresh__type-button.is-active:focus-visible,
.ap-integrations-refresh__type-button.is-active:active {
    background: transparent !important;
    color: var(--ap-ir-navy) !important;
    box-shadow: none !important;
}

/* Category filters: hover and active use the same Figma state. */
.ap-integrations-refresh__category-button {
    transition: color 140ms ease-out, border-color 140ms ease-out, background-color 140ms ease-out;
}

.ap-integrations-refresh__category-button:hover,
.ap-integrations-refresh__category-button:focus-visible,
.ap-integrations-refresh__category-button.is-active,
.ap-integrations-refresh__category-button.is-active:hover,
.ap-integrations-refresh__category-button.is-active:focus,
.ap-integrations-refresh__category-button.is-active:focus-visible,
.ap-integrations-refresh__category-button.is-active:active {
    border-color: var(--ap-ir-blue);
    background: var(--ap-ir-soft);
    color: var(--ap-ir-blue);
}

/* Desktop transition from filters into the integration cards.
 * Keep the overall vertical rhythm, but make most of the gap belong to the
 * filter section. The SVG reproduces the angled Figma boundary: white above,
 * directory pale blue below.
 */
@media (min-width: 1024px) {
    .ap-integrations-refresh__filter-section {
        position: relative;
        overflow: hidden;
        padding-bottom: 175px;
        background: #fff;
    }

    .ap-integrations-refresh__filter-section::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 120px;
        pointer-events: none;
        background: center bottom / 100% 120px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1440 120'%3E%3Crect width='1440' height='120' fill='%23f3f9fd'/%3E%3Cpath d='M0 0H1440L220 90L0 72Z' fill='%23ffffff'/%3E%3C/svg%3E");
    }

    .ap-integrations-refresh__filter-section > .ap-integrations-refresh__container {
        position: relative;
        z-index: 1;
    }

    .ap-integrations-refresh__directory {
        padding-top: 47px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-integrations-refresh__type-filters::before,
    .ap-integrations-refresh__type-button,
    .ap-integrations-refresh__category-button {
        transition: none;
    }
}