.dcg-container.dsm-show-tips {
  .dcg-expressions-branding > :not(.dsm-usage-tip) {
    display: none;
  }

  .dcg-expressions-branding {
    // Usage tip will be above the normal bounding box
    overflow: visible;
    // Still center, but allow widening
    // Leave a gap for the keypad no matter what
    width: calc(100% - 170px);
    align-self: center;
  }

  .dcg-expressionlist {
    // Need to hide overflow underneath the expressions
    overflow: hidden;
  }

  .dsm-usage-tip {
    background: var(--dcg-custom-background-color, #fff);
    position: relative;
    transition:
      bottom 0.4s,
      height 0.4s;
    bottom: 0px;

    // Color and font-size matching unresolved detail warning
    color: var(--dcg-custom-text-color-shaded, #666);
    font-size: 12.8;

    opacity: 0.3;
    line-height: 1.25;
    overflow: hidden;

    height: 46px;

    &:hover {
      opacity: 1;
      bottom: 55px;
      // extra pixel to prevent hover-jiggle from a mouse at the bottom of the screen
      height: 101px;
    }

    a {
      // Color and text-decoration matching unresolved detail warning
      color: var(--dcg-custom-text-color-shaded, #666);
      text-decoration: underline;

      &:hover {
        color: var(--dcg-custom-text-color, #000);
        text-decoration: underline;
      }

      // Overrides height: 50px
      height: unset;
    }
  }
}
