@mixin clear-inside
{
    &::after
    {
        content: "";

        clear: both;
        display: block;
    }
}

@mixin unclear-inside
{
    &::after
    {
        content: none;
    }
}

@mixin inverted($background-color: $color-background-inverted-normal, $text-color: $color-text-inverted-normal)
{
    @include antialiasing;

    background-color: $background-color;
    color: $text-color;

    a,
    a:hover,
    a:focus,
    a:visited
    {
        color: inherit;
    }

    a:active
    {
        color: $color-text-inverted-lighter;
    }
}

@mixin uninverted
{
    background-color: $color-background-lightest;
    color: $color-text-normal;
}

@mixin content-padding
{
    padding-left: $large-gutter;
    padding-right: $large-gutter;
}

@mixin page-content
{
    @include page-container;
    @include content-padding;
}

@mixin extended
{
    margin-left: $gutter;
    margin-right: $gutter;

    @include for-at-least-normal-tablets
    {
        margin-left: -$gutter;
        margin-right: -$gutter;
    }
}

@mixin shadowed
{
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);
}

@mixin background-overlay
{
    background-image: linear-gradient(create-rgba($color-text-darker, 0), create-rgba($color-text-darker, .5));

    @include for-at-least-normal-tablets
    {
        background-image: none;
    }
}

// OBSOLETE. use `button-set` mixin instead
//
// make space between multiple `.button` elements
@mixin button-spacing
{
    margin-bottom: steps(2);

    &:last-child
    {
        margin-bottom: 0;
    }

    @include for-at-least-tablets
    {
        &:not(:only-child)
        {
            margin-right: steps(2);
            margin-bottom: 0;
        }
    }
}

// make entire box clickable
// the box should contain `a` element inside it
@mixin clickable($selector: "a")
{
    position: relative;

    #{$selector}::after
    {
        content: "";

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        // workaround for ie9/10 when absolutely positioned link above a box not working properly
        // texts within a box were still not clickable
        background: create-rgba($color-background-normal, .01);
    }
}

@mixin type-selector
{
    margin-bottom: steps(3);

    ul
    {
        @include page-content;
        @include tab-list;

        justify-content: center;
    }

    @include for-at-least-normal-tablets
    {
        margin-bottom: steps(4);

        background: $color-background-darker;
    }
}

@mixin buttons
{
    padding-top: 0;
    padding-bottom: 0;
}

@mixin button-set
{
    @include buttons;

    @include for-at-least-tablets
    {
        margin: steps(-1) steps(-1) steps(1);

        &:last-child
        {
            margin-bottom: steps(-1);
        }
    }

    .button
    {
        margin-bottom: steps(2);

        @include for-phones
        {
            &:last-child
            {
                margin-bottom: 0;
            }
        }

        @include for-at-least-tablets
        {
            margin: steps(1);
        }
    }
}

@mixin links
{
    @include baseline-box(16px, steps(2.5), 0.5px);
}

@mixin list-links
{
    @include links;

    a
    {
        @include list-link;
    }
}

@mixin product-box
{
    @include button-shadow;

    display: inline-block;
    border-radius: 8px;
    background-color: #F3D1AC;
    color: #000000;
    text-align: left;

    span.svg
    {
        height: 36px;
        width: 36px;

        svg
        {
            height: 36px;
            width: 36px;
            color: $color-brand-darkest;
        }
    }

    span.text
    {
        @include sans-serif-font-family;

        display: block;
        margin: steps(2) 0 steps(1) 0;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 0.9px;
        line-height: 19px;
    }

    @include for-phones
    {
        display: flex;
        min-height: steps(5);
        padding: 12px;

        span.svg
        {
            flex-shrink: 0;
        }

        span.svg, svg
        {
            height: 36px;
            width: 36px;
        }

        span.text {
            display: inline-block;
            margin: 12px 0 0 17px;
            font-size: 12px;
        }
    }
}
