.itsec-search {
    position: relative;
    width: 100%;

    .it-ui-input-group {
        width: 100%;
        max-width: 400px;
    }

    .itsec-search__results {
        width: 600px;
        max-width: 100vw;
        max-height: 800px;
        overflow-y: scroll;
        position: absolute;
        background: $white;
        box-shadow: $popover-shadow;
        border: 1px solid $kadence-border-normal;
        z-index: 1000;
    }

    .itsec-search__kind {
        margin: 0;

        &:not(:first-child) {
            border-top: 1px solid #ccc;
        }

        & > [role="presentation"] {
            text-transform: uppercase;
            font-size: $kadence-text-size-small;
            font-weight: 400;
            color: $kadence-text-color-muted;
            border-bottom: 1px solid $kadence-border-normal;
            padding: .75rem 0.5rem;
            margin: 0 0.5rem;
            display: block;
        }

        &:first-child > [role="presentation"] {
            margin-top: 0;
        }
    }

    .itsec-search__group {
        padding: 0;
        margin: 0.5rem 0;

        & > [role="presentation"] {
            font-size: $kadence-text-size-small;
            font-weight: 600;
            color: $kadence-text-color-dark;
            text-transform: uppercase;
            padding: 0.5rem;
            margin: 0 0.5rem;
        }
    }

    .itsec-search__result {
        position: relative;
        display: block;
        padding: 0.5rem 0.5rem;
        margin: 0 0.5rem;

        &:last-child {
            margin-bottom: 0.5rem;
        }

        a {
            text-decoration: none;

            &:focus {
                box-shadow: none;
                outline: none;
            }
        }

        &[aria-selected="true"],
        &:active {
            border-radius: 2px;
            box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $kadence-primary-darker20;
            outline: 2px solid transparent;
        }

        span {
            color: $kadence-text-color-dark;
            font-size: $kadence-text-size-small;
            font-weight: 600;
        }

        p {
            color: $kadence-text-color-muted;
            margin: 0;
            font-weight: 400;
        }

        &:hover {
            span {
                color: $kadence-primary-darker20;
            }
        }
    }
}

