@mixin visually-hidden
{
    position: absolute;
    clip: rect(0, 0, 0, 0);

    // unwanted scrollbar fix for some browsers
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
}

@mixin disabled
{
    pointer-events: none;
    cursor: default;
}

@mixin transition($property: "color, background, border, outline")
{
    transition: 150ms cubic-bezier(0.65, 0.05, 0.36, 1); // easeInOutCubic
    transition-property: #{$property};
}

// private
@mixin line-break($place)
{
    &::#{$place}
    {
        content: "\A";

        white-space: pre;
    }
}

@mixin line-break-after
{
    @include line-break("after");
}

@mixin line-break-before
{
    @include line-break("before");
}

@mixin hint($inverted: false)
{
    @include font-dimensions(12px, steps(2), 0.5px);

    display: inline-block;
    overflow: hidden;
    width: steps(2);
    height: steps(2);
    border: 1px solid;
    border-radius: 50%;
    margin-left: 7px;

    text-align: center;
    text-decoration: none;
    vertical-align: middle;

    &:hover
    {
        @if ($inverted)
        {
            border-color: $color-text-inverted-lighter;
            color: $color-background-inverted-normal;
            background-color: $color-text-inverted-lighter;
        }
        @else
        {
            border-color: $color-brand-darker;
            color: $color-text-inverted-lighter;
            background-color: $color-brand-darker;
        }
    }
}

@mixin inverted-hint
{
    @include hint($inverted: true);
}
