:host-context(section) {
    /*Style only applies to this custom component (HOST element) boat-card that is inside of a section html element*/
    /*border: 1px solid red;*/
    /*DOES NOT WORK IN MOBILE*/
}
:host(*) {
    /*border: 1px solid red;*/
}

article {
    &:hover {
        cursor: pointer;
    }
    display: inline-block;
    margin: 0.3rem;
    border-radius: 15px;
    box-shadow: 1px 1px 7px 1px rgba(0,0,0,0.2);
    height: clamp(360px, 60vw, 370px);
    width: 340px; /*width: clamp(340px, 30vw, 400px);*/
    > figure {
        overflow: hidden;
        margin: 0;
        position: relative;
        > section#image-carousel {
            height: 255px;
            display: flex;
            flex-direction: row;
            transform: translateX(0);
            transition: transform 0.5s ease-in-out;
            && ::slotted(img) {
                flex-shrink: 0;
                width: 100%;
                border-top-left-radius: 15px;
                border-top-right-radius: 15px;
                object-fit: cover;
                object-position: center center;
            }
        }
        > figcaption {
            /* The term 'slotted' implies element lightDOM is moved to shadowDOM. Slotted content isn't in shadowDOM... only reflected from lightDOM.*/
            && ::slotted(p) {
                position: absolute;
                bottom: 0;
                right: 0;
                border-radius: 3px;
                margin-inline: 0.8em;
                padding: 0.3em;
                font-size: smaller;
                background-color: var(--tertiary-color);
            }
        }
        &:hover button {
            display: inline-block;
        }
        @media (hover: hover) {
            & button {
                display: none;
            }
        }
        > menu {
            position: absolute;
            top: 50%;
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            & li {
                margin-inline: 7px;
                padding: 0;
                list-style: none;
                display: inline-block;
            }
            & button {
                border-radius: 50%;
                padding: 0;
                margin: 0;
                outline: none;
                border: none;
                background-color: transparent;
                &[disabled] > svg {
                    display: none;
                    visibility: hidden;
                }
                > svg {
                    display: inline-block;
                    border-radius: 50%;
                    padding: 4px;
                    background-color: var(--tertiary-color);
                    &:hover {
                        background-color: white;
                        transform: scale(1.05);
                    }
                }
            }
        }
    }
    > section {
        /*border: 1px solid red;*/
        /*border-top: none;*/
        padding: 0.1rem 0.8rem 0.3rem;
        && ::slotted(p[slot='boat-location']) {
            font-size: smaller;
            color: gray;
            margin-block: 0.5em;
        }
        && ::slotted(p[slot='boat-title']) {
            max-width: 300px; /*FIXME: */
            margin-block: 0.8em;
            color: var(--secondary-color);
        }
    }
}

::slotted(p[slot='price-per-hour']) {
    /*color: red;*/
}
::part(a) {
    color: red;
    display: block;
}
slot[name="price-per-hour"]::slotted(p) {
    /*color: yellow;*/
}