.Hint {
    display: flex;
    gap: var(--base-gap);

    & > .Icon {
        margin-top: 3px;
    }

    &.small {
        font-size: var(--font-size-smaller);
        line-height: var(--font-line-height-short);

        & > .Icon {
            --size: var(--icon-size-small);
            margin-top: 1px;
        }
    }

    &.frame {
        border: solid var(--color-base-faintest-2) 1px;
        padding: var(--base-gap);
        border-radius: var(--border-radius);
    }

    &.opaque {
        background: var(--color-base-faintest-3);
        padding: var(--base-gap);
        border-radius: var(--border-radius);
    }
}