/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

/* ==========================================================================
  Fonts
  ========================================================================== */

/* ==========================================================================
  All typography variants

  $unit - Either em or rem
  ========================================================================== */

.feedbackMessage {
    font-family: "IbmPlexMono", monospace;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: calc(2em / 1.2);
    display: flex;
    align-items: center;
    color: rgba(75, 69, 61, 0.6)
}

.feedbackMessage .icon {
        fill-opacity: 0.7
    }

.feedbackMessage .icon.interactive {
            will-change: fill-opacity;
            transition: fill-opacity 0.3s ease
        }

.feedbackMessage .icon.interactive:hover {
                fill-opacity: 1;
            }

.feedbackMessage.small .icon {
        width: 1.2rem;
        height: 1.2rem;
    }

.feedbackMessage.large .icon {
        width: 2.4rem;
        height: 2.4rem;
    }

.feedbackMessage .tooltip {
        max-width: 28.6rem;
    }

.feedbackMessage.left .icon {
            margin-left: 0;
        }

.feedbackMessage.left.small .icon {
            margin-right: 1rem;
        }

.feedbackMessage.left.large .icon {
            margin-right: 2rem;
        }

.feedbackMessage.right {
        flex-direction: row-reverse;
        justify-content: flex-end;
        text-align: right
    }

.feedbackMessage.right .icon {
            margin-right: 0;
        }

.feedbackMessage.right.small .icon {
            margin-left: 1rem;

        }

.feedbackMessage.right.large .icon {
            margin-left: 2rem;
        }

.feedbackMessage.error {
        color: #d0021b;
    }