
.vuuFeature {
    --vuu-feature-animation-duration: .25s;
    --vuu-feature-animation-container-width: 0px;
    --vuu-feature-animation-background-width: 0px;
    --vuu-feature-detail-img-height: 476px;
    --vuu-feature-detail-img-width: 461px;
    --vuu-animation-shadow-width: var(--vuu-feature-detail-img-width);

    --feature-width: var(--vuu-feature-width, 255px);
    --vuu-feature-flex-basis: var(--feature-width);
    --vuu-feature-main-width: var(--feature-width, 255px);
    --vuu-feature-main-opacity: 1;
    --vuu-feature-main-transform: translate(0,0);
    --vuu-feature-main-item-transform: translate(0,0);
    --vuu-feature-main-title-opacity: 1;
    --vuu-feature-main-title-transform: translate(0,0) rotate(0) ;
    --vuu-feature-title-vertical-opacity: 0;
    --vuu-feature-title-vertical-transform: rotate(-90deg) translate(66px, -20px);
    
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--vuu-feature-flex-basis);
    overflow: hidden;
    position: relative;
    transition: flex-basis var(--vuu-feature-animation-duration) linear;
}
.vuuFeature-main {
    position: relative;
    width: var(--vuu-feature-main-width);
    max-width: var(--feature-width);
    transition-property: opacity, transform, width;
    transition-duration: var(--vuu-feature-animation-duration);
    transition-timing-function: linear;
    transform: var(--vuu-feature-main-transform);

  }

.vuuFeature-active {
    --vuu-feature-animation-container-width: 457px;
    --vuu-feature-animation-container-left: 32px;
    --vuu-feature-animation-background-width: 418px;
    --vuu-animation-shadow-width: 0;
    --vuu-feature-flex-basis: 764px;

    overflow: visible;
}

.vuuFeature-minimized {
    --vuu-feature-flex-basis: auto;
    --vuu-feature-main-opacity: 0;
    --vuu-feature-main-title-opacity: 0;
    --vuu-feature-title-vertical-opacity: 1;
    --vuu-feature-main-width: 100px;
}

.vuuFeature-minimized.vuuFeature-swing-title {
  --vuu-feature-main-title-opacity: 1;
  --vuu-feature-main-title-transform: rotate(-90deg) translate(-192px, -50px);
  --vuu-feature-title-vertical-opacity: 0;
  --vuu-feature-main-item-transform: translate(0, 300px);

}

.vuuFeature-minimized.vuuFeature-swing-all {
  --vuu-feature-main-opacity: 1;
  --vuu-feature-main-item-transform: rotate(-90deg) translateY(100px);
}

.vuuFeature-minimized.vuu-conflation {
  --vuu-feature-title-vertical-transform: rotate(-90deg) translate(66px, -60px);
}
.vuuFeature-minimized.vuu-joining-treeing {
  --vuu-feature-title-vertical-transform: rotate(-90deg) translate(20px, -20px);
}

.vuuFeature-heroImg-container {
    display: var(--vuu-feature-img-display, block);
    height: 100px;
    margin-bottom: 20px;
    opacity: var(--vuu-feature-main-opacity);
    transition-property: opacity, transform;
    transition-duration: var(--vuu-feature-animation-duration);
    transition-timing-function: linear;
    transform: var(--vuu-feature-main-item-transform);
    width: 100px;
  }

  .vuuFeature-title {
    display: flex;
    flex-direction: column;
    height: 112px;
    justify-content: flex-end;
    opacity: var(--vuu-feature-main-title-opacity);
    /* forces the line break */
    width: 200px;
    top: 30px;
    transition-property: opacity, transform;
    transition-duration: var(--vuu-feature-animation-duration);
    transition-timing-function: linear;
    transform: var(--vuu-feature-main-title-transform);
  }

  .vuuFeature-title-vertical {
    bottom: 0;
    left: 0;
    max-width: 200px;
    position: absolute;
    opacity: var(--vuu-feature-title-vertical-opacity);
    transition-property: opacity;
    transition-duration: var(--vuu-feature-animation-duration);
    transition-timing-function: linear;
    transform: var(--vuu-feature-title-vertical-transform);

  }

  .vuuFeature-copy {
    display: var(--vuu-feature-img-display, block);
    opacity: var(--vuu-feature-main-opacity);
    transition-property: opacity, transform;
    transition-duration: var(--vuu-feature-animation-duration);
    transition-timing-function: linear;
    transform: var(--vuu-feature-main-item-transform);
    width: var(--feature-width);
  }
  
  .vuuFeature-animation-container {
    position: relative;
    height: 100%;
    margin-left: var(--vuu-feature-animation-container-left);
  }

  .vuuFeature-animation-bg {
    background-color: white;
    border-radius: 24px;
    opacity: 0.2;
    position: absolute;
    top:0;
    left:0;
    height: calc(100% - 30px);
    transition-property: width;
        transition-duration: var(--vuu-feature-animation-duration);
        transition-timing-function: linear;
    width: var(--vuu-feature-animation-background-width);
  }

.vuuFeature-animation-shadow {
  background: linear-gradient(180deg, var(--vuu-dark-bg-background1) 0%, var(--vuu-dark-bg-background2) 100%);
  opacity: .8;
  position: absolute;
  right: calc(-1 * var(--vuu-feature-detail-img-width));
  top:0;
  max-width: unset;
  width: var(--vuu-animation-shadow-width);
  height: var(--vuu-feature-detail-img-height);
  transform: translate(50px, 50px);
  transition-property: width;
      transition-duration: var(--vuu-feature-animation-duration);
      transition-timing-function: linear;
}  

.vuuFeature-detailImg {
  position: absolute;
  left:0;
  top:0;
  max-width: unset;
  height: var(--vuu-feature-detail-img-height);
  width: var(--vuu-feature-detail-img-width);
  transform: translate(50px, 50px);
}
