/* z-index manipulation is used to avoid invisible callouts stealing mouse events */
.callout {
    position: absolute;
    z-index: -1;
}
.visible .callout {
    z-index: 2;
}
.callout.hidden {
    z-index: -1;
}
.relative-container {
    z-index: -1;
}
.relative-container.visible {
    z-index: 2;
}

/* Scene 1 */
.callout.audio-drivers {
    left: 320px;
    top: 310px;
}
.callout.detachable-microphone {
    left: 200px;
    top: 490px;
}
.callout.wireless {
    left: 470px;
    top: 400px;
}
/* */

/* Scene 2 */
.callout.aluminum-yoke {
    left: 200px;
    top: 185px;
}
.callout.metal-grill-design {
    left: 175px;
    top: 335px;
}
.callout.on-ear-control {
    left: 320px;
    top: 420px;
}
.callout.accent-stitching {
    left: 450px;
    top: 120px;
}
.callout.concealed-wiring {
    left: 580px;
    top: 300px;
}
.callout.synthetic-leather-ear-pads {
    left: 475px;
    top: 450px;
}
/* */

.callout-tooltip {
    background-color: #1e1f22;
    border: 1px solid #2b2d30;
    border-radius: 2px;

    max-height: 200px;
    max-width: 250px;
    padding: 10px 10px;

    position: absolute;

    color: #d0d0d0;
    text-align: left;
    font-size: 16px;
    white-space: nowrap;

    opacity: 0;
    transition: opacity 0.2s ease-in;
}
.expanded .callout-tooltip {
    opacity: 0.9;
    z-index: 3;
}
.callout-tooltip .title {
    color: #ffffff;
}
.callout-tooltip .content {
    margin-top: 5px;
}

.callout-tooltip.bottom {
    top: 30px;
}
.callout-tooltip.bottom-left {
    right: -25px;
    top: 30px;
}
.callout-tooltip.left {
    right: 5px;
}
.callout-tooltip.top-right {
    bottom: -25px;
    left: 30px;
}
.callout-tooltip.right {
    left: 30px;
}
.callout-tooltip.top {
    bottom: 5px;
}
.callout-button {
    position: absolute;
    z-index: -1;
    height: 24px;
    width: 24px;

    background-image: url(https://assets.corsair.com/image/upload/f_auto,q_auto/v1785779993/cwsmgmt/pdp/hs70/images/expand.svg);
    background-size: 100%;
    cursor: pointer;

    opacity: 0;
    transition: opacity 0.1s ease-in-out,
    transform 0.25s ease-in-out;
}
.callout-button.expanded {
    transform: rotate(45deg);
}
.visible .callout-button {
    opacity: 1;
    z-index: 4;
}