/* scss/Variables/_Variables.scss */


/* Colors - inrupt Branded - Generic*/
$primary-color: #7C4DFF;
$secondary-color: #01C9EA;
$tertiary-color: #18A9E6;
$tertiary-color-1: #DAE0E6;
$tertiary-color-2: #083575;
$tertiary-color-3: #01FAAB;
$link-active-color: #449DF5;
$primary-text-color: #354866;
$secondary-text-color: #666666;
$error-color: #D0021B;
$icon-color: #5361FD;
$warning-color: #FFA600;

/* inrupt Additional Specific Color Variables */
$neon-blue: #5361FD;
$steel: #666666;
$concord-gray: #7D7D7D;

/* Typography */

@import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i|Roboto:300,300i,400,400i,700,700i');

/* Typography  Variables */
$primary-font-stack: "Raleway", "Roboto", sans-serif;
$secondary-font-stack: "Roboto", sans-serif;

/* additional Variables */
$blur: 2px;
$default: rgba(0,0,0,0.1);
$color: $default;


/* Reset */
.component {
	font-family: $primary-font-stack;
	font-size: 1em;
	line-height: 1;

	.source {
		font-family: $primary-font-stack;
		font-size: 1em;
		line-height: 1;

	}
}

.row-wrap {
  width: 100%;
  margin-bottom: 3em;
}

.wrap {
  display: flex;
  justify-content: space-around;
}

ul {
 padding: 0;
 margin: 0;
 list-style: none;
}

ul li {
 padding: 0;
 margin: 0;
}

/* Gradient Functions */

@mixin linear-gradient($direction, $color-stops...) {
  // Direction has been omitted and happens to be a color-stop
  @if is-direction($direction) == false {
    $color-stops: $direction, $color-stops;
    $direction: 180deg;
  }

  background: nth(nth($color-stops, 1), 1);
  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}


/// Convert a direction to legacy syntax
/// @param {Keyword | Angle} $value - Value to convert
/// @require {function} is-direction
/// @require {function} convert-angle
/// @throw Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.;
@function legacy-direction($value) {
  @if is-direction($value) == false {
    @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
  }

  $conversion-map: (
    to top          : bottom,
    to top right    : bottom left,
    to right top    : left bottom,
    to right        : left,
    to bottom right : top left,
    to right bottom : left top,
    to bottom       : top,
    to bottom left  : top right,
    to left bottom  : right top,
    to left         : right,
    to left top     : right bottom,
    to top left     : bottom right
  );

  @if map-has-key($conversion-map, $value) {
    @return map-get($conversion-map, $value);
  }

  @return 90deg - $value;
}



/* Border Radius Mixin Controller */


$prefixes: -webkit-, -moz-, -o-, "";

@mixin borderRadius($size...) {
  @if length($size) == 1 {
    @each $prefix in $prefixes {
      #{$prefix}border-radius: $size;
    }
  } @else {
    @include customBorderRadius($size...);
  }
}

@mixin customBorderRadius($topLeft: 0, $topRight: 0, $bottomRight: 0, $bottomLeft: 0) {
  @each $prefix in $prefixes {
    @if $prefix == "-moz-" {
      @if $topLeft != 0 { -moz-border-radius-topleft: $topLeft; }
      @if $topRight != 0 { -moz-border-radius-topright: $topRight; }
      @if $bottomRight != 0 { -moz-border-radius-bottomright: $bottomRight; }
      @if $bottomLeft != 0 { -moz-border-radius-bottomleft: $bottomLeft; }
    } @else {
      @if $topLeft != 0 { #{$prefix}border-top-left-radius: $topLeft; }
      @if $topRight != 0 { #{$prefix}border-top-right-radius: $topRight; }
      @if $bottomRight != 0 { #{$prefix}border-bottom-right-radius: $bottomRight; }
      @if $bottomLeft != 0 { #{$prefix}border-bottom-left-radius: $bottomLeft; }
    }
  }
}

/* Box Shadow Mixin Controller */

@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 4px, $color: $default) {
  box-shadow: $x-axis $y-axis $blur $color;
  -webkit-box-shadow: $x-axis $y-axis $blur $color;
  -moz-box-shadow: $x-axis $y-axis $blur $color;
  -o-box-shadow: $x-axis $y-axis $blur $color;
}


/* Appearance Mixin Controller */

@mixin appearance($value) {
  appearance: $value;
  -webkit-appearance: $value;
  -moz-appearance: $value;
}



/* Media Query Mixins */


$tablet-width: 768px;
$desktop-width: 1024px;

@mixin mobile {
  @media (max-width: #{$tablet-width - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}