/*
==========================================================
FantasyFanzone Search
Version: 4.1
==========================================================
*/

/*======================================================
WRAPPER
======================================================*/

.ffz-search {
    position: relative;

    display: flex;

    align-items: center;

    flex-shrink: 0;
}

/*======================================================
BUTTON
======================================================*/

.ffz-search-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 0;
    border-radius: 999px;

    background:
        rgba(255, 255, 255, .06);

    color: #fff;

    font: inherit;
    font-size: 18px;
    line-height: 1;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition:
        background-color var(--ffz-transition-normal),
        color var(--ffz-transition-normal),
        transform var(--ffz-transition-normal),
        box-shadow var(--ffz-transition-normal);
}

.ffz-search-btn:hover {
    background:
        var(--ffz-primary);

    color: #fff;

    transform:
        translateY(-2px);

    box-shadow:
        var(--ffz-shadow-md);
}

.ffz-search-btn:focus-visible {
    outline:
        2px solid
        var(--ffz-primary);

    outline-offset: 4px;
}

/*======================================================
ICON
======================================================*/

.ffz-search-btn__icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    font-size: 17px;
    line-height: 1;

    pointer-events: none;
}

.ffz-search-btn svg,
.ffz-search-btn__icon svg {
    display: block;

    width: 20px;
    height: 20px;

    fill: currentColor;

    pointer-events: none;
}

/*======================================================
LABEL
======================================================*/

.ffz-search-btn__label {
    display: none;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    pointer-events: none;
}

/*======================================================
DESKTOP EXTENDED BUTTON
======================================================*/

@media (min-width: 1025px) {

    .ffz-search-btn--extended {
        width: auto;

        padding:
            0 18px;
    }

    .ffz-search-btn--extended
    .ffz-search-btn__label {
        display: inline-block;
    }
}

/*======================================================
ACTIVE
======================================================*/

.ffz-search-btn.is-active,
.ffz-search-btn[aria-expanded="true"] {
    background:
        var(--ffz-primary);

    color: #fff;

    box-shadow:
        var(--ffz-shadow-md);
}

/*======================================================
DISABLED
======================================================*/

.ffz-search-btn:disabled {
    opacity: .55;

    cursor: not-allowed;

    pointer-events: none;
}

/*======================================================
MOBILE
======================================================*/

@media (max-width: 768px) {

    .ffz-search-btn {
        width: 42px;
        height: 42px;
    }

    .ffz-search-btn__icon,
    .ffz-search-btn svg,
    .ffz-search-btn__icon svg {
        width: 19px;
        height: 19px;
    }
}

/*======================================================
SMALL MOBILE
======================================================*/

@media (max-width: 480px) {

    .ffz-search-btn {
        width: 40px;
        height: 40px;
    }
}

/*======================================================
REDUCED MOTION
======================================================*/

@media (prefers-reduced-motion: reduce) {

    .ffz-search-btn {
        transition: none;
    }

    .ffz-search-btn:hover {
        transform: none;
    }
}