@import "mixins/mixins-master";

.pp-ins-filter-target {

    @include transition();
    position: relative;

    &::before {
        position: absolute;
        top: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        bottom: 0;
        pointer-events: none;
    }

    .pp-ins-hover-normal .pp-ins-filter-hover:hover & {
        filter: none;

        &::before {
            display: none;
        }
    }

    .pp-ins-filter-1977 &,
    .pp-ins-hover-filter-1977 .pp-ins-filter-hover:hover & {
        filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
    }

    .pp-ins-filter-aden &,
    .pp-ins-hover-filter-aden .pp-ins-filter-hover:hover & {
        filter: sepia(.2) brightness(1.15) saturate(1.4);

        &::before {
            background: rgba(125, 105, 24, .1);
            content: "";
            mix-blend-mode: multiply;
        }
    }

    .pp-ins-filter-amaro &,
    .pp-ins-hover-filter-amaro .pp-ins-filter-hover:hover & {
        filter: sepia(.35) contrast(1.1) brightness(1.2) saturate(1.3);

        &::before {
            background: rgba(125, 105, 24, .2);
            content: "";
            mix-blend-mode: overlay;
        }
    }

    .pp-ins-filter-ashby &,
    .pp-ins-hover-filter-ashby .pp-ins-filter-hover:hover & {
        filter: sepia(.5) contrast(1.2) saturate(1.8);

        &::before {
            background: rgba(125, 105, 24, .35);
            content: "";
            mix-blend-mode: lighten;
        }
    }

    .pp-ins-filter-brannan &,
    .pp-ins-hover-filter-brannan .pp-ins-filter-hover:hover & {
        filter: sepia(.4) contrast(1.25) brightness(1.1) saturate(.9) hue-rotate(-2deg);
    }

    .pp-ins-filter-brooklyn &,
    .pp-ins-hover-filter-brooklyn .pp-ins-filter-hover:hover & {
        filter: sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);

        &::before {
            background: rgba(127, 187, 227, .2);
            content: "";
            mix-blend-mode: overlay;
        }
    }

    .pp-ins-filter-charmes &,
    .pp-ins-hover-filter-charmes .pp-ins-filter-hover:hover & {
        filter: sepia(.25) contrast(1.25) brightness(1.25) saturate(1.35) hue-rotate(-5deg);

        &::before {
            background: rgba(125, 105, 24, .25);
            content: "";
            mix-blend-mode: darken;
        }
    }

    .pp-ins-filter-clarendon &,
    .pp-ins-hover-filter-clarendon .pp-ins-filter-hover:hover & {
        filter: sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);

        &::before {
            background: rgba(127, 187, 227, .4);
            content: "";
            mix-blend-mode: overlay;
        }
    }

    .pp-ins-filter-crema &,
    .pp-ins-hover-filter-crema .pp-ins-filter-hover:hover & {
        filter: sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg);

        &::before {
            background: rgba(125, 105, 24, .2);
            content: "";
            mix-blend-mode: multiply;
        }
    }

    .pp-ins-filter-dogpatch &,
    .pp-ins-hover-filter-dogpatch .pp-ins-filter-hover:hover & {
        filter: sepia(.35) saturate(1.1) contrast(1.5);
    }

    .pp-ins-filter-earlybird &,
    .pp-ins-hover-filter-earlybird .pp-ins-filter-hover:hover & {
        filter: sepia(.25) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-5deg);

        &::before {
            background: radial-gradient(circle closest-corner, transparent 0, rgba(125, 105, 24, .2) 100%);
            content: "";
            mix-blend-mode: multiply;
        }
    }

    .pp-ins-filter-gingham &,
    .pp-ins-hover-filter-gingham .pp-ins-filter-hover:hover & {
        filter: contrast(1.1) brightness(1.1);

        &::before {
            background: #e6e6e6;
            content: "";
            mix-blend-mode: soft-light;
        }
    }

    .pp-ins-filter-ginza &,
    .pp-ins-hover-filter-ginza .pp-ins-filter-hover:hover & {
        filter: sepia(.25) contrast(1.15) brightness(1.2) saturate(1.35) hue-rotate(-5deg);

        &::before {
            background: rgba(125, 105, 24, .15);
            content: "";
            mix-blend-mode: darken;
        }
    }

    .pp-ins-filter-hefe &,
    .pp-ins-hover-filter-hefe .pp-ins-filter-hover:hover & {
        filter: sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4) hue-rotate(-10deg);

        &::before {
            background: radial-gradient(circle closest-corner, transparent 0, rgba(0, 0, 0, .25) 100%);
            content: "";
            mix-blend-mode: multiply;
        }
    }

    .pp-ins-filter-helena &,
    .pp-ins-hover-filter-helena .pp-ins-filter-hover:hover & {
        filter: sepia(.5) contrast(1.05) brightness(1.05) saturate(1.35);

        &::before {
            background: rgba(158, 175, 30, .25);
            content: "";
            mix-blend-mode: overlay;
        }
    }

    .pp-ins-filter-hudson &,
    .pp-ins-hover-filter-hudson .pp-ins-filter-hover:hover & {
        filter: sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg);

        &::before {
            background: radial-gradient(circle closest-corner, transparent 25%, rgba(25, 62, 167, .25) 100%);
            content: "";
            mix-blend-mode: multiply;
        }
    }

    .pp-ins-filter-inkwell &,
    .pp-ins-hover-filter-inkwell .pp-ins-filter-hover:hover & {
        filter: brightness(1.25) contrast(.85) grayscale(1);
    }

    .pp-ins-filter-juno &,
    .pp-ins-hover-filter-juno .pp-ins-filter-hover:hover & {
        filter: sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8);

        &::before {
            background: rgba(127, 187, 227, .2);
            content: "";
            mix-blend-mode: overlay;
        }
    }

    .pp-ins-filter-kelvin &,
    .pp-ins-hover-filter-kelvin .pp-ins-filter-hover:hover & {
        filter: sepia(.15) contrast(1.5) brightness(1.1) hue-rotate(-10deg);

        &::before {
            background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .25) 0, rgba(128, 78, 15, .5) 100%);
            content: "";
            mix-blend-mode: overlay;
        }
    }

    .pp-ins-filter-lark &,
    .pp-ins-hover-filter-lark .pp-ins-filter-hover:hover & {
        filter: sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25);
    }

    .pp-ins-filter-lofi &,
    .pp-ins-hover-filter-lofi .pp-ins-filter-hover:hover & {
        filter: saturate(1.1) contrast(1.5);
    }

    .pp-ins-filter-ludwig &,
    .pp-ins-hover-filter-ludwig .pp-ins-filter-hover:hover & {
        filter: sepia(.25) contrast(1.05) brightness(1.05) saturate(2);

        &::before {
            background: rgba(125, 105, 24, .1);
            content: "";
            mix-blend-mode: overlay;
        }
    }

    .pp-ins-filter-maven &,
    .pp-ins-hover-filter-maven .pp-ins-filter-hover:hover & {
        filter: sepia(.35) contrast(1.05) brightness(1.05) saturate(1.75);

        &::before {
            background: rgba(158, 175, 30, .25);
            content: "";
            mix-blend-mode: darken;
        }
    }

    .pp-ins-filter-mayfair &,
    .pp-ins-hover-filter-mayfair .pp-ins-filter-hover:hover & {
        filter: contrast(1.1) brightness(1.15) saturate(1.1);

        &::before {
            background: radial-gradient(circle closest-corner, transparent 0, rgba(175, 105, 24, .4) 100%);
            content: "";
            mix-blend-mode: multiply;
        }
    }

    .pp-ins-filter-moon &,
    .pp-ins-hover-filter-moon .pp-ins-filter-hover:hover & {
        filter: brightness(1.4) contrast(.95) saturate(0) sepia(.35);
    }

    .pp-ins-filter-nashville &,
    .pp-ins-hover-filter-nashville .pp-ins-filter-hover:hover & {
        filter: sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg);

        &::before {
            background: radial-gradient(circle closest-corner, rgba(128, 78, 15, .5) 0, rgba(128, 78, 15, .65) 100%);
            content: "";
            mix-blend-mode: screen;
        }
    }
}
