inputhint {
    align-items: center;
    height: 32px;
    display: flex;

    .glyph {
        background-size: contain;
        background-repeat: no-repeat;
        background-image-tint: #FAB002;
    }

    .action {
        margin-left: 8px;
        margin-bottom: 2px;
        font-size: 16px;
        color: #FAB002;
        font-weight: bold;
        text-shadow: 0px 0px 2px black;
    }

    flex-direction: row;

    &.small {
        margin-right: 0px;
        margin-left: 0px;

        .action {
            display: none;
        }
    }

    &.invert {
        .action {
            margin-right: 8px;
        }

        flex-direction: row-reverse;
    }


    &.noaction {
        .action {
            display: none;
        }
    }

    &.hide {
        display: none;
    }
}