/*
Buttons

In most cases you should not use the button class for links. Use either `<button>` or `<input type="submit" />`
when using buttons. <strong>Never</strong> use `<span>`, `<div>` or elements without a semantic meaning as buttons.

Example: The default button
    <button type="button" class="button">Button</button>
    <button type="button" class="button  button--fill">Button</button>

Example: For primary actions, use this only to separate from other actions.
    <button type="button" class="button  button--primary">Button</button>
    <button type="button" class="button  button--primary-fill">Button</button>

Example: For secondary actions, don't overuse.
    <button type="button" class="button  button--secondary">Button</button>
    <button type="button" class="button  button--secondary-fill">Button</button>

Example: For actions that need's to stand out on red or dark blue background.
    <button type="button" class="button  button--light">Button</button>
    <button type="button" class="button  button--light-fill">Button</button>

Example: Button with icon
    <button type="button" class="button">
        <span class="icon-chevron-right button__icon"></span>
    </button>

Example: This is some modifiers you can add (PS: Can be combined)
    <button type="button" class="button  button--block">
        Make it 100% width of whatever container
    </button>
    <button type="button" class="button  button--compact">Compact button</button>
    <br>
    <button type="button" class="button  button--wider">Wider button</button>
    <br>
    <button type="button" class="button  button--spaced">Spaced button</button>
    <br>
    <button type="button" class="button" disabled>Disabled button</button>

Styleguide form.2:buttons
*/

@mixin button-modifier($b-name, $b-main, $b-text, $b-hover, $b-text-hover: false) {
    &--#{$b-name} {
        color: $b-text;
        border-color: $b-main;
        background-color: transparent;

        &:hover,
        &:focus,
        &:active {
            border-color: $b-hover;
            background-color: $b-hover;

            @if ($b-text-hover) {
                color: $b-text-hover;
            } @else {
                color: color-contrast($b-hover);
            }
        }
    }

    &--#{$b-name}-fill {
        border-color: $b-hover;
        background-color: $b-hover;

        @if ($b-text-hover) {
            color: $b-text-hover;
        } @else {
            color: color-contrast($b-hover);
        }

        &:hover,
        &:focus,
        &:active {
            color: $b-text;
            border-color: $b-main;
            background-color: transparent;
        }
    }
}


@mixin button() {
    @include spaced-text;
    @include font(base, bold);
    @include font-size(xsmall);
    font-style: normal;
    text-align: center;

    position: relative;
    display: block;
    width: 100%;
    padding: $unit $spacing--small;
    border-radius: $border-radius;

    color: $color-text;
    white-space: normal;

    border: $border-width solid color(neutral, dark);
    background-color: transparent;
    margin-bottom: $unit;

    @include min-width(md) {
        display: inline-block;
        white-space: nowrap;
        width: auto;
        padding: #{$spacing--small - $border-width} #{$indention - $border-width};
    }

    &[disabled] {
        pointer-events: none;
        opacity: 0.4;
    }

    &:hover,
    &:focus,
    &:active {
        color: $color-light;
        border-color: color(neutral, dark);
        background-color: color(neutral, dark);

        .button__icon--non-hover {
            display: none;
        }

        .button__icon--hover {
            display: inline-block;
        }
    }

    &:focus {
        z-index: 2;
    }
}


@mixin button--compact() {
    @include font-size(xsmall);
    padding: $unit $spacing--small;
}


@mixin button--block() {
    display: block;
    width: 100%;
}


@mixin button--spaced() {
    @include min-width(md) {
        margin-left: $spacing--small;
        margin-right: $spacing--small;
    }
}

@mixin button__icon() {
    position: relative;
    vertical-align: middle;
    top: -2px;
    margin-right: $unit;

    &--non-hover {
        display: inline-block;
    }

    &--hover {
        display: none;
    }

    &--first {
        margin-left: -($unit);
    }
}

.button {
    @include button();

    &__icon {
        @include button__icon();
    }

    &--fill {
        color: $color-light;
        border-color: color(neutral, dark);
        background-color: color(neutral, dark);

        &:hover,
        &:focus,
        &:active {
            color: $color-text;
            border-color: color(neutral, dark);
            background-color: transparent;
        }
    }

    @include button-modifier(
        'primary',
        color(primary),
        color(primary),
        color(primary, dark)
    );

    // TODO: Remove?
    @include button-modifier(
        'secondary',
        color(secondary, dark),
        color(secondary, dark),
        color(secondary, dark)
    );

    @include button-modifier(
        'light',
        $color-light,
        $color-light,
        $color-light,
        color(primary)
    );

    &--wider { // TODO: Remove?
        min-width: $unit * 30;
    }

    &--spaced {
        @include button--spaced();
    }

    &--block {
        @include button--block();
    }

    &--compact {
        @include button--compact();
    }

    // TODO: Should not be here - should be a general css class just like screenreader-only!
    &--hidden-in-print {
        @media print {
            display: none;
        }
    }
}
