.flip-x {
    transform: scaleX(-1);
}

.hidden {
    display: none;
}

/**
 * Hides an element.
 */
.hide {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

/**
 * Shows an element.
 */
.show {
    display: block !important;
}

/**
 * resets default button styles,
 * mostly intended to be used on interactive elements that
 * differ from their default styles (e.g. <a>) or have custom styles
 */
.invisible-button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
}


/**
 * style an element the same as an <a>
 * useful on some cases where we visually have a link but it's actually a <button>
 */
.as-link {
    @extend .invisible-button;

    display: inline;
    color: #44A5FF;
    text-decoration: none;
    font-weight: bold;

    &:focus,
    &:hover,
    &:active {
        text-decoration: underline;
    }
}