// body.styleguide.components

// Colors
@import '../colors';
@import 'vars';
@import 'mixins';

// Typography
$sd-atkinson-font: 'Atkinson Hyperlegible', 'Helvetica Neue', Helvetica, Roboto, sans-serif;
$sd-base-font-family: $sd-atkinson-font;
$sd-header-font-family: $sd-base-font-family;

// Font Sizes
// body
$sd-base-font-size: 100%;

// headings
$sd-jumbo-text: rem(32);
$sd-x-large-text: rem(28);
$sd-large-text: rem(24);
$sd-med-large-text: rem(20);
$sd-medium-text: rem(18);
$sd-base-text: rem(16);
$sd-small-text: rem(15);
$sd-x-small-text: rem(14);
$sd-tiny-text: rem(13);
$sd-mini-text: rem(12);

// mobile
$sd-jumbo-text-mobile: rem(26);
$sd-large-text-mobile: rem(22);

// Font Weights
// Atkinson Hyperlegible renders in 2 font weights only
$sd-font-weight-regular: 400;
$sd-font-weight-bold: 700;
// The following font-weight variables are deprecated, please use $sd-font-weight-bold
$sd-font-weight-medium: $sd-font-weight-bold;
$sd-font-weight-demi: $sd-font-weight-bold;
$sd-font-weight-heavy-bold: $sd-font-weight-bold;

// Line height
$sd-base-line-height: 1.5;
$sd-header-line-height: 1.25;

// Spacing
$sd-base-spacing: 30px;
$sd-small-spacing: $sd-base-spacing / 2;
$sd-mobile-gutter: 6.26%;
$sd-mobile-card-gutter: 2%;
$sd-mobile-card-padding: $sd-mobile-gutter - $sd-mobile-card-gutter;
$sd-utility-bar-padding: 18px;

// Returns the percentage an element needs to reset its parent's percentage
// based padding
// Takes in a percentage
@function sd-reset-padding($percent) {
    @return (((2 * $percent) / (100 - (2 * $percent))) / 2) * 100%;
}

$sd-mobile-gutter-reset: sd-reset-padding($sd-mobile-gutter);
$sd-mobile-card-padding-reset: sd-reset-padding($sd-mobile-card-padding);

// Other Sizes
$sd-base-border-radius: 3px; // forms & tags
$sd-corner-radius: 8px; // modals & notifications
$sd-button-border-radius: 100px;
$sd-base-z-index: 0;
$sd-select-box-height: 41px;
$sd-tap-target: 44px;

button,
.button,
.sd-button {
    // Deprecate this
    cursor: pointer;
}

// design_system/_borrowed.scss
// This stuff comes from Bourbon
$sd-em-base: 16px !default;

@function sd-assign-inputs($inputs, $pseudo: null) {
    // Save for when the forms component is in
    $list: ();

    @each $input in $inputs {
        $input: unquote($input);
        $input: if($pseudo, $input + ':' + $pseudo, $input);
        $list: append($list, $input, comma);
    }

    @return $list;
}

$sd-prefix-for-webkit: true !default;
$sd-prefix-for-mozilla: true !default;
$sd-prefix-for-microsoft: true !default;
$sd-prefix-for-opera: true !default;
$sd-prefix-for-spec: true !default;

@mixin disable-prefix-for-all() {
    $sd-prefix-for-webkit: false !global;
    $sd-prefix-for-mozilla: false !global;
    $sd-prefix-for-microsoft: false !global;
    $sd-prefix-for-opera: false !global;
    $sd-prefix-for-spec: false !global;
}

@mixin sd-prefixer($sd-property, $sd-value, $sd-prefixes) {
    @each $prefix in $sd-prefixes {
        @if $prefix == webkit {
            @if $sd-prefix-for-webkit {
                -webkit-#{$sd-property}: $sd-value;
            }
        } @else if $prefix == moz {
            @if $sd-prefix-for-mozilla {
                -moz-#{$sd-property}: $sd-value;
            }
        } @else if $prefix == ms {
            @if $sd-prefix-for-microsoft {
                -ms-#{$sd-property}: $sd-value;
            }
        } @else if $prefix == o {
            @if $sd-prefix-for-opera {
                -o-#{$sd-property}: $sd-value;
            }
        } @else if $prefix == spec {
            @if $sd-prefix-for-spec {
                #{$sd-property}: $sd-value;
            }
        } @else {
            @warn "Unrecognized prefix: #{$prefix}";
        }
    }
}

@mixin sd-appearance($value) {
    @include sd-prefixer(appearance, $value, webkit moz ms o spec);
}

@function rem($sd-pxval) {
    @if not unitless($sd-pxval) {
        $sd-pxval: strip-units($sd-pxval);
    }

    $sd-base: $sd-em-base;
    @if not unitless($sd-base) {
        $sd-base: strip-units($sd-base);
    }
    @return ($sd-pxval / $sd-base) * 1rem;
}

@function strip-units($value) {
    @return ($value / ($value * 0 + 1));
}