.info-hotspot {

    position: absolute;

    left: var(--info-hs-label-size-minus-half);
    top: var(--info-hs-label-size-minus-half);

    display: grid !important;
    gap: 0;
    /* TODO minmax for auto width above a certain min width */
    grid-template-columns: auto;
    grid-template-rows: var(--info-hs-label-size) auto;
    grid-template-areas:
        "header"
        "content";

    height: var(--info-hs-label-size);

    pointer-events: none;

}



/* CONTENT STYLING */

.info-hotspot .info-hotspot-content {

    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;

    display: flex;
    flex-direction: column;

    transform: scaleY(0);
    opacity: 0;
    margin-top: calc(0.5 * var(--info-hs-label-size));

    padding: 20px 20px;

    border-top-left-radius: var(--info-hs-border-radius);
    background-color: var(--highlight-rgb);

    -webkit-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    transform-origin: 0px 0px;

    -webkit-transition: opacity 0.3s ease-in-out,
        transform 0.3s ease-in-out,
        margin-top 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out,
        transform 0.3s ease-in-out,
        margin-top 0.3s ease-in-out;

    pointer-events: all;
    z-index: 5;

}



.info-hotspot.visible .info-hotspot-content {

    transform: scaleY(1);
    opacity: 1;
    margin-top: 0;

}



.info-hotspot .info-hotspot-subtitle-container {

    margin-top: var(--info-hs-label-size);

}



.info-hotspot .info-hotspot-media-container {

    display: grid;
    gap: 0;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "media";

    padding: 10px 0px;

}



/* full width only when hotspot is opened */
.info-hotspot.visible .info-hotspot-media-container {
    width: 600px;

}



.info-hotspot .info-hotspot-text-container {

    padding: 10px 0px;

}



/* HEADER STYLING */

.info-hotspot .info-hotspot-header {

    grid-area: header;

    display: grid;
    gap: 0;
    grid-template-columns: var(--info-hs-label-size) auto var(--info-hs-label-size);
    grid-template-rows: var(--info-hs-label-size);
    grid-template-areas: "info title close";

    align-items: center;

    width: var(--info-hs-label-size);
    height: var(--info-hs-label-size);
    padding: 0px;

    border-radius: var(--info-hs-border-radius);

    background-color: rgba(1, 1, 1, 0);

    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: 0px 0px;

    -webkit-transition: width 0.3s ease-in-out,
        background-color 0.3s ease-in-out;
    transition: width 0.3s ease-in-out,
        background-color 0.3s ease-in-out;

    cursor: pointer;
    pointer-events: all;
    z-index: 10;

}



.info-hotspot .info-hotspot-header:hover {

    background-color: var(--background-rgba);

    width: 100%;

}



.info-hotspot.visible .info-hotspot-header {

    background-color: var(--highlight-rgb);
    width: 100%;

}



.info-hotspot .info-hotspot-label-circle {

    grid-area: info;

    width: var(--info-hs-label-size);
    height: var(--info-hs-label-size);

    background-color: rgba(1, 1, 1, 0);

    border: 4px solid var(--highlight-rgb);
    border-radius: var(--info-hs-border-radius);

}



.info-hotspot .info-hotspot-header:hover .info-hotspot-label-circle {

    background-color: rgba(1, 1, 1, 0);

}



.info-hotspot .info-hotspot-label-circle-inner {

    position: absolute;

    width: var(--info-hs-label-inner);
    height: var(--info-hs-label-inner);
    left: var(--info-hs-label-half-rest);
    top: var(--info-hs-label-half-rest);

    background-color: var(--background-rgba);

    border-radius: 50%;

}



.info-hotspot.visible .info-hotspot-label-circle-inner {

    background-color: var(--background-rgb);

}



.info-hotspot .info-hotspot-label-container {

    grid-area: info;

    width: var(--info-hs-label-size);
    height: 100%;

}



.info-hotspot .info-hotspot-label-container>p {

    position: relative;

    font-weight: 400;
    font-size: 130%;
    text-align: center;
    line-height: var(--info-hs-label-size);
    color: var(--highlight-rgb);

}



.info-hotspot .info-hotspot-info-icon {

    grid-area: info;

}



.info-hotspot .info-hotspot-close-icon {

    grid-area: close;

    justify-self: center;
    align-self: center;

    width: var(--icon-size);
    height: var(--icon-size);

    transform: scale(0);
    opacity: 0;
    fill: var(--icon-rgb);

    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;

    -webkit-transition: transform 0.3s ease-in-out,
        fill 0.3s ease-in-out,
        opacity 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out,
        fill 0.3s ease-in-out,
        opacity 0.3s ease-in-out;

}



.info-hotspot .info-hotspot-header:hover .info-hotspot-close-icon {

    fill: var(--hover-rgb);

}



.info-hotspot.visible .info-hotspot-close-icon {

    transform: scale(1);
    opacity: 1;

}



.info-hotspot .info-hotspot-title-container {

    grid-area: title;

    align-self: flex-start;

    transform: scaleX(0);
    opacity: 0;
    padding: 0px 20px;

    color: var(--highlight-rgb);
    background-color: rgba(1, 1, 1, 0);

    -webkit-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    transform-origin: 0px 0px;

    -webkit-transition: transform 0.3s ease-in-out,
        opacity 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out,
        opacity 0.3s ease-in-out;

}



.info-hotspot .info-hotspot-header:hover .info-hotspot-title-container {

    transform: scaleX(1);
    opacity: 1;

}



.info-hotspot.visible .info-hotspot-title-container {

    color: var(--icon-rgb);

    transform: scaleX(1);
    opacity: 1;

}


.info-hotspot .info-hotspot-title-container>p {

    font-size: 130%;
    font-weight: 400;
    line-height: var(--info-hs-label-size);

    overflow: hidden;
    white-space: nowrap;

}