/**
 * The buttons should only be a base style
 *  any real production button should preferably be built on top of / replacing these. 
 */

// Buttons
//
// <code class="block">@mixin button</code>
// Improvement uppon the default buttons. Buttons as they should be. 
//
// Markup:
// <button>Normal button</button><button class="button">Utility button</button>
// 
// Styleguide Button

// Sizes
//
// <code class="block">@mixin buttonSize([xs,sm,md,lg,xl,wide,wider])</code>
// use the BEM modifiers to change the default button sizes:
// <ul>
// <li>.button--xs: smallest button in the book</li>
// <li>.button--sm: still smaller than default</li>
// <li>.button--md: actually the default</li>
// <li>.button--lg: bigger than default</li>
// <li>.button--xl: pretty big</li>
// <li>.button--wide: wider than default</li>
// <li>.button--wider: much wider than default</li>
// </ul>
// 
// Markup:
// <button class="button--xs button bg-yellow">Sample button</button>
// <button class="button--sm button bg-green">Sample button</button>
// <button class="button--md button bg-red">Sample button</button>
// <button class="button--lg button bg-blue">Sample button</button>
// <button class="button--xl button bg-white">Sample button</button>
//
//
// Styleguide Button.sizes
@mixin button() {
    @include no-select();
    @include clickable();
    border: 1px solid color(black);
    color: color(black);
    background-color: color(white);

    display: inline-block;
    border: none;

    text-align: center;
    text-decoration: none;
    border-radius: 2px;

    padding: 12px 16px;
}
.button {
    @include button();
}

// TODO: Optimize button sizes
@mixin buttonSize($size){ 
    @if $size == 'xs' {
        padding: 4px;
    }
    @if $size == 'sm' {
        padding: 8px 10px;
    }
    @if $size == 'lg' {
        padding: 16px 32px;
    }
    @if $size == 'xl' {
        padding: 24px 64px;
    }
    @if $size == 'wide' {
        padding-left: 32px;
        padding-right: 32px;
    }
    @if $size == 'wider' {
        padding-left: 64px; 
        padding-right: 64px;
    }
}
.button--xs {
    @include buttonSize('xs');
}
.button--sm {
    @include buttonSize('sm');
}
.button--md {
    @include buttonSize('md');
}
.button--lg {
    @include buttonSize('lg');
}
.button--xl {
    @include buttonSize('xl');
}
.button--wide {
    @include buttonSize('wide');
}
.button--wider {
    @include buttonSize('wider');
}

// Styles
//
// <code class="block">@mixin buttonStyle([flat, curve, pill, round])</code>
// Add appearance styles to buttons
// <ul>
// <li>.button--flat: removes the border-radius</li>
// <li>.button--curve: adds a border-radius</li>
// <li>.button--pill: makes the button pill shaped</li>
// <li>.button--round: makes the button circle shaped 
//      <span class="note">Should be used in combination with fixed width and height</span></li>
// </ul>
//
// Markup:
// <button class="button--flat button bg-green">Sample button</button>
// <button class="button--curve button bg-green">Sample button</button>
// <button class="button--pill button bg-blue">Sample button</button>
// <button class="button--round w64 h64 button bg-red">Big</button>
//
//
// Styleguide Button.styles
@mixin buttonStyle($style){ // should only be used in combination with button()
    @if $style == 'flat' {
        border-radius: 0px;
    }
    @if $style == 'curve' {
        border-radius: 8px;
    }
    @if $style == 'pill' {
        border-radius: 20px;
    }
    @if $style == 'round' {
        @include flex-center();
        border-radius: 50%;
    } 
}
.button--flat {
    @include buttonStyle('flat');
}
.button--curve {
    @include buttonStyle('curve');
}
.button--pill {
    @include buttonStyle('pill');
}
.button--round {
    @include buttonStyle('round');
}

// Effects
//
// <code class="block">@mixin buttonEffect([lighten, darken, 3d])</code>
// Add hover-effects to buttons
// <ul>
// <li>.button--lighten: lightens the button opacity</li>
// <li>.button--darken: darkens the button bg</li>
// <li>.button--3d: gives a 3d effect to a button</li>
// </ul>
//
// Markup:
// <button class="button--lighten button bg-green">Sample button</button>
// <button class="button--darken button bg-green">Sample button</button>
// <button class="button--3d button bg-green">Sample button</button>
//
//
// Styleguide Button.Effects
@mixin buttonEffect($effect) {
    @if $effect == 'lighten' {
        transition: 0.2s;
        &:hover {
            opacity: 0.8;
        }
    }
    @if $effect == 'darken' {
        transition: 0.2s;
        &:hover {
            @include bgStyle('darken');
        }
    }
    @if $effect == '3d' {
        --button-shadow-color: color(black);
        box-shadow: 0 3px var(--button-shadow-color);
        &:hover {
            box-shadow: 0 2px var(--button-shadow-color);
            transform: translateY(1px);
        }
        &:active {
            box-shadow: 0 0px var(--button-shadow-color);
            transform: translateY(3px);
        }
    }
}
.button--fade, .button--lighten {
    @include buttonEffect('lighten');
}
.button--darken {
    @include buttonEffect('darken');
}
.button--press, .button--3d {
    @include buttonEffect('3d');
}