@layer addon {
    .search {
        .menuSearch {
            &[aria-current="page"] {
                &:before {display: none;}
            }
        }
        .templateContent {
            background-color: transparent;
            .container {
                row-gap: var(--section);
                padding-bottom: 0;
                .inner {
                    text-align: center;
                    align-items: center;
                    .intro {
                        width: 100%;
                        max-width: 800px;
                        .title {
                            font-size: var(--xl-fontsize);
                            line-height: var(--xl-lineheight);
                        }
                        .subTitle {
                            display: none;
                        }
                        .title, .subTitle, .content {
                            color: var(--color-light);
                        }
                        label {
                            input {
                                border-top-right-radius: 0;
                                border-bottom-right-radius: 0;
                                border: 0;
                                border-top-left-radius: var(--border-radius);
                                border-bottom-left-radius: var(--border-radius)
                            }
                            button {
                                width: auto;
                                border-top-left-radius: 0;
                                border-bottom-left-radius: 0;
                                .text {
                                    -webkit-hyphens: none;
                                            hyphens: none;
                                    @media (max-width: 56em) {
                                        display: none;
                                    }
                                    @media (--max-fablet) {
                                        display: none;
                                    }
                                }
                                .icon {
                                    all: unset;
                                    order: 2;
                                }
                                &:hover {
                                    @media (hover: hover) {
                                        background-color: var(--color5);
                                    }
                                }
                            }
                        }
                }
                }
                .media {
                    border-radius: var(--section-radius) var(--section-radius) 0 0;
                    @media (min-width: 56em) {
                        grid-column: 2 / span 10;
                    }
                    @media (--min-fablet) {
                        grid-column: 2 / span 10;
                    }
                }
            }
        }
        .results {
            grid-column: span 12;
            order: 2;
            background: var(--color4);
            border-radius: var(--section-radius) var(--section-radius) 0 0;

            display: grid;
            grid-template-columns: repeat(12, 1fr);
            padding: var(--section) 0;
        }

        .no-results {
            grid-column: 2 / span 10;
            padding: var(--section) 0;
        }

        .result {
            grid-column: 2 / span 10;
            &.jobPostings, &.pages {
                .content {
                    .item {
                        flex: 1 1 100%;
                    }
                }
            }
            &.pages {
                .content {
                    gap: 0;
                }
            }
        }        

        .item.page {
            border-bottom: 3px solid #E0E3DE;
            .block {
                position: relative;
                height: 100%;
                border-radius: 0;
                overflow: initial;
                &:before {
                    border-radius: var(--section-radius) var(--section-radius) 0 0;
                    width: calc(100% + var(--padding)); 
                    opacity: 0;
                    transition: opacity .2s,transform .25s cubic-bezier(.49,1.42,.25,1.53);
                    transform: translate(-50%,-50%) scale(.95);
                    content: "";
                    background: var(--gradient);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform-origin: center bottom;
                    height: calc(100% + 6px);
                }
                .inner {
                    z-index: 2;
                    padding: var(--padding) 0;
                    text-align: left;
                    align-items: flex-start;
                    .header {
                        .title {
                            font-weight: bold;
                            font-size: var(--m-fontsize);
                            color: var(--color1);
                            order: 1;
                        }
                    }
                    .footer {
                        z-index: 2;
                        position: absolute;
                        right: var(--gutter);
                        top: 50%;
                        transform: translateY(-50%);
                        .button {
                            font-size: var(--xs-fontsize);
                            .icon {
                                width: 24px;
                                height: 24px;
                            }
                            .text {
                                display: none;
                            }
                        }
                    }
                }

                &:hover {
                    @media (hover: hover) {
                        color: #fff;
                        &:before {
                            opacity: 1;
                            transform: translate(-50%,-50%);
                        }
                        .inner {
                            .header {
                                .title {
                                    color: #fff;
                                }
                            }
                            .footer {
                                .button {
                                    &.textLink {
                                        .icon {
                                            color: #fff;
                                            transform: translateX(0);
                                        }
                                    }
                                }
                            }
                            
                        }
                    }
                }
            }
        }
        .item.jobposting {
            border-bottom: 3px solid #E0E3DE;
            .block {
                position: relative;
                height: 100%;
                border-radius: 0;
                overflow: initial;
                
                &:before {
                    border-radius: var(--section-radius) var(--section-radius) 0 0;
                    width: calc(100% + var(--padding)); 
                    opacity: 0;
                    transition: opacity .2s,transform .25s cubic-bezier(.49,1.42,.25,1.53);
                    transform: translate(-50%,-50%) scale(.95);
                    content: "";
                    background: var(--gradient);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform-origin: center bottom;
                    height: calc(100% + 6px);
                }
                .inner {
                    text-align: left;
                    align-items: flex-start;
                    justify-content: space-between;
                    padding: var(--padding) 0;
                    position: relative;
                    .header {
                        gap: calc(var(--gutter) / 2);
                        .title {
                            font-weight: bold;
                            font-size: var(--m-fontsize);
                            color: var(--color1);
                            order: 1;
                        }
                        .tags {
                            order: 2;
                            .tag {
                                font-size: var(--xs-fontsize);
                                background: none;
                                color: var(--color2);
                                padding: 0;
                            }
                            .tag {
                                &:before {
                                    content: "\2022";
                                    color: var(--color1);
                                    font-weight: bold;
                                    font-family: arial, sans-serif;
                                    font-size: 1em;
                                    vertical-align: middle;
                                }
                                &:first-of-type {
                                    &:before {
                                        display: none;
                                    }
                                }
                            }
                        }
                    }
                    .content {
                        flex: 1 1 auto;
                        width: calc(100% - var(--section));
                    }
                    .footer {
                        z-index: 2;
                        position: absolute;
                        right: var(--gutter);
                        top: 50%;
                        transform: translateY(-50%);
                        .button {
                            font-size: var(--xs-fontsize);
                            .icon {
                                width: 24px;
                                height: 24px;
                            }
                            .text {
                                display: none;
                            }
                        }
                    }
                }

                &:hover {
                    @media (hover: hover) {
                        color: #fff;
                        &:before {
                            opacity: 1;
                            transform: translate(-50%,-50%);
                        }
                        .inner {
                            .header {
                                .title {
                                    color: #fff;
                                }
                                .tags {
                                    .tag {
                                        color: #fff;
                                        &:before {
                                            color: #fff;
                                        }
                                    }
                                }
                            }
                        }
                        .footer {
                            .button {
                                &.textLink {
                                    .icon {
                                        color: #fff;
                                        transform: translateX(0);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}