@import 'color-palette';

$bg-color: color('gray', 100);
$text-color: color('gray', 800);

$primary-color: color('blue', 700);
$accent-color: color('teal', 700);
$bg-accent-color: color('blue', 100);

$error-color: color('red', 700);
$warning-color: color('orange', 400);
$info-color: color('blue', 200);
$success-color: color('green', 300);

$heading-font: 'Spartan MB', 'Spartan', 'League Spartan', Helvetica, sans-serif;
$heading-weight: 800;
$body-font: 'FiraGO', 'Fira Sans', Helvetica, sans-serif;

$font-size: 16px;

$max-width: 980px;

/* Elements */

$button-height: 45px;

/* Selector variables */

$button: '.button, button';
$text-inputs: 'input[type=search], input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], textarea, select';
$external-link-selector: '&:not([href^="https://www.datenanfragen.de"]):not([href^="https://www.datarequests.org"]):not([href^="https://www.demandetesdonnees.fr"]):not([href^="https://www.pedidodedados.org"]):not([href^="https://www.solicituddedatos.es"]):not([href^="https://www.osobnipodaci.org"]):not([href^="https://www.gegevensaanvragen.nl"]):not([href^="https://www.zadostioudaje.org"]):not([href^="https://static.dacdn.de"]):not([href^="http://localhost:"]):not([href^="http://datenanfragen.test:"]):not([href^="https://verein.datenanfragen.de"]):not([href^="#"]):not([href*="--datenanfragen.netlify.app/"]):not([href^="mailto:"]):not([href^="/"])[href*="."]';

$dark-mode: false;

/* Mixins */

// Fake a collapsible border using `box-shadow`, taken from https://codepen.io/Hawkun/pen/rsIEp
@mixin fake-border($color, $top, $right, $bottom, $left) {
    /* prettier-ignore */
    box-shadow:
            $right 0 0 0 $primary-color,
            0 $bottom 0 0 $primary-color,
            $right $right 0 0 $primary-color, // to fix the corner
            $left 0 0 0 $primary-color inset,
            0 $top 0 0 $primary-color inset;
}

// TODO: Add a tablet breakpoint
@mixin mobile() {
    @media (max-width: ($max-width - 1px)) {
        @content;
    }
}
@mixin desktop() {
    @media (min-width: $max-width) {
        @content;
    }
}

/* Functions */

@function color($hue, $shade: null) {
    @if $hue == 'white' {
        @return if($dark-mode, hsb(0, 0%, 0%), hsb(0, 0%, 100%));
    } @else if $hue == 'black' {
        @return if($dark-mode, hsb(0, 0%, 100%), hsb(0, 0%, 0%));
    }

    @if not $shade {
        @error "Hue '#{$hue}' requires a shade to be specified.";
    }

    @if $dark-mode {
        $shade: 1000 - $shade;
    }

    @if not map-has-key($colors, $hue) {
        @error "No such hue: '#{$hue}'.";
    }
    @if not map-has-key(map-get($colors, $hue), $shade) {
        @error "No such shade: #{$shade} (for hue '#{$hue}').";
    }

    @return map-get(map-get($colors, $hue), $shade);
}

// Adapted after: https://www.sitepoint.com/hsb-colors-with-sass/
@function hsb($h-hsb, $s-hsb, $b-hsb, $a: 1) {
    @if $b-hsb == 0 {
        @return hsla(0, 0, 0, $a);
    } @else {
        $l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100));
        $s-hsl: if($s-hsb == 0, 0, ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2));
        @return hsla($h-hsb, $s-hsl, $l-hsl, $a);
    }
}

// Taken from: http://www.sassmeister.com/gist/1b4f2da5527830088e4d
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace +
            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}
