// ------------------------------
// edX Pattern Library: Mixins

// About: Sass partial containing mixins and functions for use within the application.

// #MIXINS


// ------------------------------
// #MIXINS
// ------------------------------
@mixin font-smoothing($value: on) {
    @if $value == on {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    @else {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
}

// form fields
// these should really be extends, but for some reason they weren't working.
// there's some sort of limition on sass compilation when re-using extends with nested psueos
// https://github.com/sass/libsass/issues/146 has more information
@mixin input-track($is-interactive: true) {
    @include transition(all timing(xx-fast) ease-in-out 0s);
    @include transform-origin(center center);
    width: 100%;
    height: rem($baseline/2);
    border: 0;
    border-radius: 3px;
    background: palette(grayscale, back);
    @if $is-interactive == true {
        cursor: pointer;
    }
}

@mixin input-track-hover {
    background: palette(primary, back);
}

@mixin input-thumb {
    @include size(rem($baseline/2));
    @include transition(all timing(xx-fast) ease-in-out 0s);
    border: 0;
    border-radius: 50%;
    background: palette(primary, base);
    -webkit-appearance: none;
}

@mixin input-thumb-hover {
    @include size(rem($baseline));
    margin-top: -(rem($baseline/3.25));
    background: palette(primary, accent);
}

@mixin input-progress-complete {
    @include transition(all timing(xx-fast) ease-in-out 0s);
    @include input-track-hover;
    border-radius: 3px;
}

@mixin input-radio {
    @include transition(all timing(xx-fast) ease-in-out 0s);
    @include margin-right(spacing-horizontal(small));
    border: 1px solid palette(primary, accent);
    border-radius: 50%;
    background: $white;
    box-shadow: inset 0 0 0 3px palette(primary, x-back);
}

@mixin input-radio-checked {
    border-color: palette(primary, base);
    background: $white;
    box-shadow: inset 0 0 0 6px palette(primary, base);
}

@mixin input-checkbox {
    @include transition(all timing(xx-fast) ease-in-out 0s);
    @include margin-right(spacing-horizontal(small));
    border: 1px solid palette(primary, accent);
    background: $white;
    box-shadow: inset 0 0 0 3px palette(primary, x-back);
}

@mixin input-checkbox-checked {
    border-color: palette(primary, base);
    background: $white;
    box-shadow: inset 0 0 0 6px palette(primary, base);
}

@mixin input-radio-disabled {
    border: 1px solid palette(grayscale, back);
    border-radius: 50%;
    background: $white;
    box-shadow: inset 0 0 0 3px palette(grayscale, x-back);
    cursor: not-allowed;
}

@mixin input-checkbox-disabled {
    border: 1px solid palette(grayscale, back);
    background: $white;
    box-shadow: inset 0 0 0 3px palette(grayscale, x-back);
    cursor: not-allowed;
}