//layout mixins - start

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

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

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

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

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

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

//layout mixins - end

//transition mixins - start

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

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

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

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



@mixin edgePlaceholder {
    &::-webkit-input-placeholder {
        @content
    }
    &:-moz-placeholder {
        @content
    }
    &::-moz-placeholder {
        @content
    }
    &:-ms-input-placeholder {
        @content
    }
}

//transition mixins - end

/* Button mixins - start */
@mixin edgeButtonDefaultStyle() {
    font-family: inherit;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    outline: none;
    line-height: 47px;
    letter-spacing: 0.15em;
    font-weight: 400;
    text-transform: none;
    box-sizing: border-box;
    margin: 0;
    padding: 2px 48px;
    @include edgeTransition(color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out);
}

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

@mixin edgeButtonSolidColor() {
    color: $default-background-color;
    background-color: $header-dark-color;
    border: 2px solid transparent;
}

@mixin edgeButtonSolidHoverColor() {
    color: $default-background-color;
    background-color: $button-hover-color;
}

@mixin edgeButtonOutlineColor() {
    color: $first-main-color;
    background-color: transparent;
    border: 1px solid $light-border-color;
}

@mixin edgeButtonOutlineHoverColor() {
    color: $default-background-color;
    background-color: $first-main-color;
    border-color: $first-main-color;
}

@mixin edgeButtonSmallParams() {
    padding: 0 24px;
}

@mixin edgeButtonMediumParams() {
    padding: 2px 48px;
    font-size: 14px;
}

@mixin edgeButtonLargeParams() {
    padding: 4px 58px;
}

@mixin edgeButtonHugeParams() {
    display: block;
    text-align: center;
    padding: 17px 65px;
}

/* Button mixins - end */

//media query mixins - start

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

@mixin ipad-pro-landscape {
    @media only screen and (max-width: map-get($breakpoints, ipad-pro-landscape)) {
        @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 larger-phone-landscape {
    @media only screen and (max-width: map-get($breakpoints, larger-phone-landscape)) {
        @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

//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