//layout mixins - start

@mixin edgtfTableLayout() {
    position: relative;
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}

@mixin edgtfTableCellLayout($vertical-align: middle) {
    position: relative;
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: $vertical-align;
}

@mixin edgtfRelativeHolderLayout($vertical-align: middle) {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: $vertical-align;
}

@mixin edgtfAbsoluteHolderLayout() {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

@mixin edgtfTypographyLayout() {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

//layout mixins - end

//transition mixins - start

@mixin edgtfTransition($transition-param...) {
    -webkit-transition: $transition-param;
    -moz-transition: $transition-param;
    transition: $transition-param;
}

@mixin edgtfTransitionTransform($transition-param...) {
    -webkit-transition: -webkit-transform $transition-param;
    -moz-transition: -moz-transform $transition-param;
    transition: transform $transition-param;
}

@mixin edgtfTransform($transform-param...) {
    -webkit-transform: $transform-param;
    -moz-transform: $transform-param;
    transform: $transform-param;
}

@mixin edgtfAnimation($animation-param...) {
    -webkit-animation: $animation-param;
    -moz-animation: $animation-param;
    animation: $animation-param;
}

@mixin edgtfTransformOrigin($animation-param...) {
    -webkit-transform-origin: $animation-param;
    -moz-transform-origin: $animation-param;
    transform-origin: $animation-param;
}

//transition mixins - end

//checkbox mixins - start

$checkbox-size: 15px;
$checkbox-border-width: 1px;

%checkbox-style {
    line-height: 1;
    margin: 8px 0;
    position: relative;

    input[type=checkbox] {
        display: inline-block;
        height: $checkbox-size;
        left: 0;
        margin: 0;
        max-height: $checkbox-size;
        position: relative;
        top: 0;
        vertical-align: top;
        width: $checkbox-size;
    }

    input[type=checkbox] + label {
        cursor: pointer;;
        display: inline-block;
        left: 0;
        line-height: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
    }

    input[type=checkbox] + label span.edgtf-label-text {
        color: $default-heading-color;
        display: inline-block;
        line-height: $checkbox-size;
        padding-left: 10px;
    }

    input[type=checkbox] + label .edgtf-label-view {
        background-color: $default-background-color;
        border: $checkbox-border-width solid $default-border-color;
        border-radius: 2px;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        height: $checkbox-size;
        vertical-align: top;
        width: $checkbox-size;

        &:hover {
            cursor: pointer;
        }
    }

    input[type=checkbox] + label .edgtf-label-view:after {
        background-color: $default-heading-color;
        content: '';
        height: $checkbox-size / 2 - $checkbox-border-width;
        left: ($checkbox-size - ($checkbox-size / 2 - $checkbox-border-width)) / 2;
        opacity: 0;
        position: absolute;
        top: ($checkbox-size - ($checkbox-size / 2 - $checkbox-border-width)) / 2;
        width: $checkbox-size / 2 - $checkbox-border-width;

        @include edgtfTransition(opacity 0.3s ease-in-out);
    }

    input[type=checkbox]:checked + label .edgtf-label-view:after {
        opacity: 1;
    }
}

//checkbox mixins - end

/* common mixins - start */

@mixin edgtfBckImageStyle() {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

@mixin edgtfImageOverlayHoverStyle($with-hover: true) {
    @if ($with-hover) {
        &:hover {
            &:after {
                opacity: 1;
            }
        }

        &:after {
            @include edgtfAbsoluteHolderLayout();

            content: '';
            background-color: rgba($default-heading-color, .4);
            opacity: 0;

            @include edgtfTransition(opacity .2s ease-in-out);
        }

    } @else {
        @include edgtfAbsoluteHolderLayout();

        content: '';
        background-color: rgba($default-heading-color, .4);
        opacity: 0;

        @include edgtfTransition(opacity .2s ease-in-out);
    }
}

@mixin edgtfDefaultHoverOpacity() {
    &:hover {
        opacity: $default-hover-opacity;
    }
}

@mixin edgtfButtonDefaultStyle() {
    font-family: inherit;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    outline: none;
    font-size: 16px;
    line-height: 2em;
    font-weight: 400;
    box-sizing: border-box;
    margin: 0;
    text-decoration: none;

    @include edgtfTransition(color .2s $default-easing, background-color .2s $default-easing, border-color .2s $default-easing);
}

@mixin edgtfButtonSimple() {
    background-color: transparent;
    border: 0;
    color: $default-heading-color;
    font-size: $button-font-size;
    line-height: 1em !important;
    padding: 0 !important;
    vertical-align: middle;
}

@mixin edgtfButtonLine() {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: currentColor;
}

@mixin edgtfButtonTransparentColor() {
    color: $default-text-color;
    background-color: transparent;
}

@mixin edgtfButtonSolidColor($important:null) {
    color: #fff $important;
    background-color: $default-heading-color $important;
    border: 1px solid transparent $important;
}

@mixin edgtfButtonSolidHoverColor($important:null) {
    color: #fff $important;
    background-color: $default-heading-color $important;
}

@mixin edgtfButtonOutlineColor($important:null) {
    color: $default-heading-color $important;
    background-color: transparent $important;
    border: 1px solid $default-heading-color $important;
}

@mixin edgtfButtonOutlineHoverColor($important:null) {
    color: #fff $important;
    background-color: $default-heading-color $important;
    border-color: $default-heading-color $important;
}

@mixin edgtfButtonSmallParams() {
    padding: 4px 23px;
}

@mixin edgtfButtonMediumParams() {
    padding: 8px 49px;
}

@mixin edgtfButtonLargeParams() {
    padding: 12px 60px;
}

@mixin edgtfButtonHugeParams() {
    display: block;
    text-align: center;
    padding: 12px 0;
}

@mixin edgtfPlaceholder {
    &::-webkit-input-placeholder {
        @content
    }

    &:-moz-placeholder {
        @content;

        opacity: 1;
    }

    &::-moz-placeholder {
        @content;

        opacity: 1;
    }

    &:-ms-input-placeholder {
        @content
    }
}

/* common mixins - end */

/* mixins styles - start */

%input-style {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid $default-border-color;
    border-radius: 0;
    box-sizing: border-box;
    color: $default-text-color;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-style: italic;
    font-weight: inherit;
    line-height: #{$input-height - 1px};
    margin: 0 0 $input-margin;
    outline: 0;
    padding: $input-padding;
    position: relative;
    width: 100%;

    &:focus {
        border-color: $default-text-color;
        color: $default-heading-color;
    }

    @include edgtfTransition(border-color 0.2s ease-in-out);

    @include edgtfPlaceholder {
        color: $default-text-color;
    }

    -webkit-appearance: none;
}

/* mixins styles - end */

//media query mixins - start

@mixin laptop-landscape-large {
    @media only screen and (max-width: map-get($breakpoints, laptop-landscape-large)) {
        @content;
    }
}

@mixin laptop-landscape-mac {
    @media only screen and (max-width: map-get($breakpoints, laptop-landscape-mac)) {
        @content;
    }
}

@mixin laptop-landscape-medium {
    @media only screen and (max-width: map-get($breakpoints, laptop-landscape-medium)) {
        @content;
    }
}

@mixin laptop-landscape {
    @media only screen and (max-width: map-get($breakpoints, laptop-landscape)) {
        @content;
    }
}

@mixin ipad-landscape {
    @media only screen and (max-width: map-get($breakpoints, ipad-landscape)) {
        @content;
    }
}

@mixin ipad-portrait {
    @media only screen and (max-width: map-get($breakpoints, ipad-portrait)) {
        @content;
    }
}

@mixin phone-landscape {
    @media only screen and (max-width: map-get($breakpoints, phone-landscape)) {
        @content;
    }
}

@mixin phone-portrait {
    @media only screen and (max-width: map-get($breakpoints, phone-portrait)) {
        @content;
    }
}

@mixin smaller-phone-portrait {
    @media only screen and (max-width: map-get($breakpoints, smaller-phone-portrait)) {
        @content;
    }
}

//media query mixins - end

//flexbox mixins - start

@mixin edgtfFlexContainer($flex-direction: row, $flex-wrap: nowrap, $justify-content: flex-start, $align-items: stretch, $align-content: stretch ) {
    display: flex;
    flex-direction: $flex-direction;
    flex-wrap: $flex-wrap;
    justify-content: $justify-content;
    align-items: $align-items;
    align-content: $align-content;
}

@mixin edgtfFlexItem($order: 0, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto) {
    order: $order;
    flex-grow: $flex-grow;
    flex-shrink: $flex-shrink;
    flex-basis: $flex-basis;
}

//flexbox mixins - end

//animation mixin - start

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

    @keyframes #{$name} {
        @content;
    }
}

@mixin animation($name, $duration, $repeat, $timing, $delay) {
    -webkit-animation-name: $name;
    -webkit-animation-duration: $duration;
    -webkit-animation-iteration-count: $repeat;
    -webkit-animation-timing-function: $timing;
    -webkit-animation-delay: $delay;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-name: $name;
    animation-duration: $duration;
    animation-iteration-count: $repeat;
    animation-timing-function: $timing;
    animation-delay: $delay;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

//animation mixin - end

// headingz
@mixin edgtfH1() {
    font-size: 63px;
    font-weight: 700;
    line-height: 1.06em;
}

@mixin edgtfH2() {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.09em;
}

@mixin edgtfH3() {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.08em;
}

@mixin edgtfH4() {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.08em;
}

@mixin edgtfH5() {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.16em;
}

@mixin edgtfH6() {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.07em;
}

@mixin edgtfInfoSection($single:false) {
    $distance: 0;

    color: $default-text-color;
    display: inline-block;
    margin-left: $distance;
    font-style: italic;

    @if ($single==false) {
        &:after {
            content: ' / ';
            padding-left: $distance;
        }

        &:first-child {
            margin-left: 0;
        }

        &:last-child {
            &:after {
                display: none;
            }
        }
    }

    a {
        color: inherit;

        &:hover {
            color: $default-heading-color;
        }
    }
}