@use "sass:list";

@mixin bevel-tl-br($color, $tlDeg: 135deg, $tlSize: 10px, $brDeg: 315deg, $brSize: $tlSize){
    background: $color; /* fallback */
    background: linear-gradient($tlDeg, transparent $tlSize, $color 0) top left,
    linear-gradient($brDeg, transparent $brSize, $color 0) bottom right;
    background-size: 60% 100%;
    background-repeat: no-repeat;
}

@mixin bevel-bl-tr($color, $blDeg: 45deg, $blSize: 10px, $trDeg: 225deg, $trSize: 10px){
    background: $color; /* fallback */
    background: linear-gradient($trDeg, transparent $trSize, $color 0) top right,
    linear-gradient($blDeg, transparent $blSize, $color 0) bottom left;
    background-size: 60% 100%;
    background-repeat: no-repeat;
}

@mixin bevel45($color, $tl: 10px, $br: $tl){
    @include bevel-tl-br($color, 135deg, $tl, 315deg, $br);
}

@mixin bevel135($color, $bl: 10px, $tr: $bl){
    @include bevel-bl-tr($color, 45deg, $bl, 225deg, $tr);
}

@mixin svg-bevel($stroke, $fill, $type, $corner, $angle, $strokeWidth: 2){
    position: relative;
    background-image: url("data:image/svg+xml;utf8,<svg data-type='#{$type}' data-corner='#{$corner}' data-angle='#{$angle}' fill='#{$fill}' stroke='#{$stroke}' stroke-width='#{$strokeWidth}'><polygon points=''/></svg>");
    svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
    }
}

@mixin placeholder($name, $value){
    &::-webkit-input-placeholder {
            #{$name}: $value;
    }
    &::-moz-placeholder {
            #{$name}: $value;
    }
    &:-moz-placeholder {
            #{$name}: $value;
    }
    &:-ms-input-placeholder {
            #{$name}: $value;
    }
}

@mixin transform($value){
    -moz-transform: $value;
    -ms-transform: $value;
    -o-transform: $value;
    -webkit-transform: $value;
    transform: $value;
}

@mixin transform-origin($value){
    -moz-transform-origin: $value;
    -ms-transform-origin: $value;
    -o-transform-origin: $value;
    -webkit-transform-origin: $value;
    transform-origin: $value;
}

@mixin transition($value, $values...){
    $value: list.join($value, $values);
    -webkit-transition: $value;
    -moz-transition: $value;
    -o-transition: $value;
    transition: $value;
}

@mixin box-shadow($value){
    -webkit-box-shadow: $value;
    -moz-box-shadow: $value;
    box-shadow: $value;
}

@mixin noselect(){
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

@mixin clearfix(){
    &:after {
        content: "";
        clear: both;
        display: table;
    }
}

$a: unquote("a, a:hover, a:active, a:focus");
$is-editor: unquote("html.fl-builder-edit");
$not-editor: unquote("html:not(.fl-builder-edit)");
$is-mobile: unquote("html.mobile");
$not-mobile: unquote("html:not(.mobile)");
$not-editor-not-mobile: unquote("html:not(.fl-builder-edit):not(.mobile)");
$is-post: unquote("body.single-post");

@mixin default-shadow(){
    @include box-shadow(0px 20px 80px 0px rgba(0, 0, 0, 0.4));
}

// keyframes animation
@mixin keyframes($name){
    @-moz-keyframes #{$name} {
        @content;
    }
    @-webkit-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}

@mixin animation($value){
    -webkit-animation: $value;
    -moz-animation: $value;
    animation: $value;
}

@mixin desktopMobileSwitch(){
    #{$not-editor} & {
        &.desktop {
            display: block;
        }

        &.mobile {
            display: none;
        }

        @include phone() {
            &.desktop {
                display: none;
            }

            &.mobile {
                display: block;
            }
        }
    }
}

@mixin falken-section-top-negative($selector, $margin: 200px){
    body.single-post .falken-section.#{$selector} {
        margin-top: $margin;
    }
}

@mixin section-fullwidth($value: 100%){
    .fl-row-content {
        width: 100%;
        max-width: $value;
    }
}

@mixin section-height($value){
    min-height: $value;
}

@mixin section-color($color){
    .fl-row {
        background: $color;
    }
}

@mixin line-after($width:60px, $height:4px, $color:$colorAccent){
    &:after {
        $halfWidth: $width * 0.5;
        content: '';
        position: absolute;
        width: $width;
        height: $height;
        left: calc(50% - #{$halfWidth});
        bottom: 0;
        background: $color;
    }
}

@mixin h1($size){
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: $size;
    line-height: 1;
}

@mixin section-h1($color: $colorSectionHeaderFont, $margin: 130px auto 70px, $underline: $colorSectionHeaderLine){
    @include h1(80px);
    color: $color;
    padding: 0 0 20px;
    margin: $margin;
    text-align: center;
    position: relative;
    @include line-after($color: $underline);

    @include tablet() {
        font-size: 60px;
        padding: 0 0 30px;
        margin: 8vw 0;
    }

    @include phone() {
        font-size: 50px;
        padding: 0 0 30px;
        margin: 40px 0;
    }

    @include phone-small() {
        font-size: 40px;
    }
}

@mixin bevel-and-shadow($color, $topLeft, $bottomRight:$topLeft, $z:5){

    > * {
        position: relative;
        z-index: $z;
    }

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        @include bevel45($color, $topLeft, $bottomRight);
        z-index: $z - 1;
    }

    &:after {
        $p: $topLeft * 1.5;
        content: '';
        position: absolute;
        bottom: $p * 0.5;
        left: $p * 0.5;
        width: calc(100% - #{$p});
        height: calc(100% - #{$p});
        @include box-shadow(0 0 ($topLeft * 2) ($topLeft * 0.5) rgba(0, 0, 0, 0.4));
        z-index: $z - 2;
    }
}

@mixin brackets($sel1, $sel2:$sel1, $scale: 1, $top: 0, $right:0, $bottom:0, $left:0, $cornerSize: 100px, $color: ''){
    #{$sel1},
    #{$sel2} {
        position: relative;
    }

    #{$sel1}:before,
    #{$sel2}:after {
        content: '';
        position: absolute;
        width: $cornerSize;
        height: $cornerSize;
    }

    #{$sel1}:before {
        top: -$cornerSize + $top;
        left: -$cornerSize + $left;
        background: url('#{$img}/ico-top-left-bracket#{$color}.svg') bottom right no-repeat;
    }

    #{$sel2}:after {
        bottom: -$cornerSize + $bottom;
        right: -$cornerSize + $right;
        background: url('#{$img}/ico-bottom-right-bracket#{$color}.svg') top left no-repeat;
    }

    #{$sel1}:before {
        @include transform(scale($scale));
        @include transform-origin(bottom right);
    }

    #{$sel2}:after {
        @include transform(scale($scale));
        @include transform-origin(top left);
    }
}

@mixin merged-reviews-social-background($value){
    #{$not-editor} & {
        .section-reviews {
            .fl-row-content-wrap {
                padding-bottom: $value !important;
            }
        }

        .section-social {
            .fl-row-content-wrap {
                padding-top: $value;

                .fl-row-content {
                    margin-top: -2 * $value;
                }
            }
        }
    }
}

$img: '/themes/scs-falken/assets/img';
$uploads: '/themes/scs-falken/assets/img/content/uploads';
$font: '/themes/scs-falken/assets/font';
$default-width: 1144px;
// @formatter:off
@mixin phone-small() {@media only screen and (max-width: 360px) {@content;}}
@mixin phone-medium() {@media only screen and (max-width: 500px) {@content;}}
@mixin phone() {@media only screen and (max-width: 767px) {@content;}}
@mixin not-phone() {@media only screen and (min-width: 768px) {@content;}}
@mixin tablet() {@media only screen and (min-width: 768px) and (max-width: 1025px) {@content;}}
@mixin desktop() {@media only screen and (min-width: 1026px) {@content;}}
@mixin mobile() {@media only screen and (max-width: 1025px) {@content;}}
@mixin max1600() {@media only screen and (max-width: 1600px) {@content;}}
@mixin max1500() {@media only screen and (max-width: 1500px) {@content;}}
@mixin max1400() {@media only screen and (max-width: 1400px) {@content;}}
@mixin min1401() {@media only screen and (min-width: 1401px) {@content;}}
@mixin max1300() {@media only screen and (max-width: 1300px) {@content;}}
@mixin max1200() {@media only screen and (max-width: 1200px) {@content;}}
@mixin min1201() {@media only screen and (min-width: 1201px) {@content;}}
// formatter:on