---
// Properties
const {
    Title,
    Description,
    Link,
} = Astro.props
---

<div class="search-result-web">
    <a href={Link}>
        <h2>{Title}</h2>
        <p><u>{Link}</u></p>
    </a>
    <p>{Description}</p>
    <div class="search-result-web-sublinks">
        <slot name="sublinks"/>
    </div>
</div>

<style lang="scss" is:global>
.search-result-web {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--box-background);
    margin-bottom: 12px;
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0px 4px 10px 0px #0000000a;
    transition:  0.6s background, 0.3s box-shadow;
    &:hover {
        box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.2);
        transition: 0.3s box-shadow;
    }
    * {
        margin: 0px;
    }
    p {
        font-size: 14px;
    }
    a {
        text-decoration: none;
        h2 {
            font-size: 20px;
            color: var(--text);
        }
        p {
            font-size: 12px;
            text-decoration: underline;
            color: var(--link);
            transition: 0.6s color;
        }
    }
    .search-result-web-sublinks {
        display: grid;
        gap: 6px 12px;
        grid-template-columns: auto auto;
        a {
            font-size: 18px;
        }
    }
}
</style>