@import 'variables';
@import 'functions';
@import "colors";

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
    $min: map-get($breakpoints, $name);
    @if $min {
        @media (min-width: $min) {
            @content;
        }
    } @else {
        @content;
    }
}

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
    $max: map-get($breakpoints, $name);
    @if $max {
        @media (max-width: $max) {
            @content;
        }
    } @else {
        @content;
    }
}

@mixin fontSize($size) {
    font-size: calculateRem($size);
}

@mixin clearfix() {
    &::after {
        display: block;
        clear: both;
        content: '';
    }
}

@mixin formFieldFocusedState() {
    box-shadow: none;
    border-color: $info !important;
    outline: none;

    @include formFieldFocusTransition();
}

@mixin formFieldFocusedButtonState() {
    box-shadow: 0 0 0 2px $info;
    border-color: $wcf-blue !important;
    outline: none;

    @include formFieldFocusTransition();
}

@mixin formFieldFocusTransition() {
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -ms-transition: all 0.25s;
    -o-transition: all 0.25s;
}