// // Header Toggle Positionings //

@mixin header-toggler-positioning($media-type: 0) {

$media-var: 0;
$media-type-mod: '';

@if $media-type == sm {
        $media-var: $g-sm;
        $media-type-mod: --sm;
}
@else if $media-type == md {
        $media-var: $g-md;
        $media-type-mod: --md;
}
@else if $media-type == lg {
        $media-var: $g-lg;
        $media-type-mod: --lg;
}
@else if $media-type == xl {
        $media-var: $g-xl;
        $media-type-mod: --xl;
}

@media all and (min-width: #{$media-var}) {

        .u-header-toggler {

                // Positioning

                &--top-right#{$media-type-mod},
                &--top-right#{$media-type-mod}.btn,
                &--top-left#{$media-type-mod},
                &--top-left#{$media-type-mod}.btn,
                &--bottom-right#{$media-type-mod},
                &--bottom-right#{$media-type-mod}.btn,
                &--bottom-left#{$media-type-mod},
                &--bottom-left#{$media-type-mod}.btn {
                        position: fixed;
                }

                // Axis y

                &--top-right#{$media-type-mod},
                &--top-right#{$media-type-mod}.btn,
                &--top-left#{$media-type-mod},
                &--top-left#{$media-type-mod}.btn {
                        @include px-to-rem(top, 20px);
                }

                &--bottom-right#{$media-type-mod},
                &--bottom-right#{$media-type-mod}.btn,
                &--bottom-left#{$media-type-mod},
                &--bottom-left#{$media-type-mod}.btn {
                        @include px-to-rem(bottom, 20px);
                }

                // Axis x
                &--top-left#{$media-type-mod},
                &--bottom-left#{$media-type-mod} {
                        @include px-to-rem(left, 20px);
                }

                &--top-right#{$media-type-mod},
                &--bottom-right#{$media-type-mod} {
                        @include px-to-rem(right, 20px);
                }

        }

}

}