

.bh-c9-rotator{

  position:
    relative;

  min-height:
    106px;

  overflow:
    hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--bh-accent)
      16%,
      transparent
    );

  border-left:
    3px solid
    var(--bh-accent);

  border-radius:
    0 16px 16px 0;

  background:
    linear-gradient(
      105deg,
      color-mix(
        in srgb,
        var(--bh-accent)
        9%,
        transparent
      ),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);
}


.bh-c9-rotator::after{

  content:"";

  position:absolute;

  width:
    120px;

  height:
    120px;

  right:
    -70px;

  top:
    -65px;

  border-radius:
    50%;

  background:
    var(--bh-accent);

  filter:
    blur(55px);

  opacity:
    .08;

  pointer-events:
    none;
}


.bh-c9-rotator-label{

  display:flex;

  align-items:center;

  gap:
    7px;
}


.bh-c10-typing-live-dot{

  width:
    6px;

  height:
    6px;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    var(--bh-accent);

  box-shadow:
    0 0 12px
    var(--bh-accent);

  animation:
    bhC10LiveDot
    1.7s
    ease-in-out
    infinite;
}


@keyframes bhC10LiveDot{

  50%{
    opacity:.35;
    transform:scale(.78);
  }

}


.bh-c9-rotator-text{

  position:
    relative;

  z-index:
    2;

  min-height:
    31px;

  font-size:
    clamp(
      17px,
      1.5vw,
      20px
    );

  font-weight:
    900;

  letter-spacing:
    -.01em;

  text-wrap:
    balance;
}


.bh-c10-rotator-detail{

  display:block;

  position:
    relative;

  z-index:
    2;

  min-height:
    17px;

  margin-top:
    4px;

  color:
    #8fa7bd;

  font-size:
    10.5px;

  line-height:
    1.45;

  opacity:
    0;

  transform:
    translateY(4px);

  transition:
    opacity .25s ease,
    transform .25s ease;
}


.bh-c10-rotator-detail.is-visible{

  opacity:
    1;

  transform:
    translateY(0);
}


/* Market Analytics version */

.showcase-text >
.bh-c10-market-rotator{

  margin:
    17px 0 13px;

  --bh-accent:
    #20ecf0;

  --bh-accent-2:
    #733efd;
}


/* Mobile */

@media(max-width:680px){

  .bh-c9-rotator{

    min-height:
      100px;

    padding:
      12px 13px;
  }


  .bh-c9-rotator-text{

    min-height:
      42px;

    font-size:
      16px;

    line-height:
      1.35;
  }


  .bh-c10-rotator-detail{

    font-size:
      10px;
  }

}


/* Accessibility */

@media(
  prefers-reduced-motion:
  reduce
){

  .bh-c10-typing-live-dot,
  .bh-c9-rotator-text::after{

    animation:
      none !important;
  }


  .bh-c10-rotator-detail{

    transition:
      none !important;
  }

}

