$debug: false;

$SCREEN_SIZES: (
    'PRE-PHONE': 950px,
    'PHONE': 1080px
);

$COLORS:  (
    'BACKGROUND': #010101,
    'BACKGROUND_TEXT': none,
    'BLACK': #000,
    'DARK_ORANGE': #8D3F07,
    'ORANGE': #FF9E00,
    'WHITE': #fff
);

@function getScreenSize($size){
    @if not map-has-key($SCREEN_SIZES, $size){
        @error 'Resolution not found';
    }
    @return map-get($SCREEN_SIZES, $size);
}

@function getColor($color){
    @if not map-has-key($COLORS, $color){
        @error 'Color not found';
    }
    @return map-get($COLORS, $color);
}

body
{
    background-color:getColor('BACKGROUND');
    background:getColor('BLACK');
}

header nav #wrapper ul li
{
    background:getColor('DARK_ORANGE');
}

header nav #wrapper #pc_searchHidden
{
    background:getColor('DARK_ORANGE');
}

header nav #wrapper #pc_searchHidden p
{
    color:getColor('WHITE');
}

header nav ul li
{
    color:getColor('WHITE');
}

header nav ul a li p
{
    color:getColor('WHITE');
}

#gadgetLagretWrapper .flexWrapper p
{
    color:getColor('WHITE');
}

#gadgetLagretWrapper h1
{
    color:getColor('WHITE');
}

#gadgetLagretWrapper .flexWrapper #button {
    background-color: getColor('DARK_ORANGE');
}

.foremalsParent .foremalWrapper .wrapper .föremålBox
{
    &:hover
    {
        border-color:lightgray;
    }
}

.header_phone nav #mobile_searchHidden ul li
{
    background: darken(getColor('DARK_ORANGE'), 10%);
    &:hover
    {
        background:white;
    }
}


$social-medias: ("facebook.png", "twitter.png");
/* Mixin för att kunna lägga olika bilder på socialmedia. Används för att inte behöva skriva om samma kod om och om igen */
@mixin socialMedia($i)
{
    $img: nth($social-medias, $i);

    background:url("../Bilder/"+$img);
    width: 4em;
    height: 4em;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    margin-left: 1em;
}

footer .flexWrapper #socialMediaWrapper
{
    display:flex;
    justify-content:flex-end;
    margin-left: 2em;
}

@for $i from 1 through length($social-medias) {
    .socialMedia_#{$i} { @include socialMedia($i); }
}

@media screen and (max-width: getScreenSize('PHONE')) {

}

    @mixin socialMedia($i)
    {
        $img: nth($social-medias, $i);
        background:url("../Bilder/"+$img);
    }

    @for $i from 1 through length($social-medias) {
        .socialMedia_#{$i} { @include socialMedia($i); }
    }


/* sortiment_varor.scss */
$products: ("ssd.png", "moderkort.png", "moderkort2.png", "grafikkort.png", "grafikkort2.png", "grafikkort3.png");
@mixin getProduct($i) {
    $img: nth($products, $i);
    background:url("../Bilder/hardvaror/"+$img);
}

@for $i from 1 through length($products) {
    .image#{$i} { @include getProduct($i); }
}