<commit_before>@import "media";
@import "functions";
@import "mixins";

/// @type Map - definition of component map params
/// @prop {List} direction [to,bottom] - gradient direction
/// @prop {String} background - default state background
/// @prop {String} font-color [#fff] - default state font color
/// @prop {String} border - default state border
/// @prop {String} text-shadow - default state text shadow
/// @prop {String} box-shadow - default state box shadow
/// @prop {String} icon-color - default state icon color
/// @prop {String} icon-text-shadow - default state icon text shadow
/// @prop {String} placeholder-color - default state placeholder color
/// @prop {String} hover.background - hover background
/// @prop {String} hover.font-color - hover font color
/// @prop {String} hover.border - hover border
/// @prop {String} hover.text-shadow - hover text shadow
/// @prop {String} hover.box-shadow - hover box shadow
/// @prop {String} hover.icon-color - hover icon color
/// @prop {String} hover.icon-text-shadow - hover icon text shadow
/// @prop {String} active.background - active background
/// @prop {String} active.font-color - active font color
/// @prop {String} active.border - active border
/// @prop {String} active.text-shadow - active text shadow
/// @prop {String} active.box-shadow - active box shadow
/// @prop {String} active.icon-color - active icon color
/// @prop {String} active.icon-text-shadow - active icon text shadow
/// @prop {String} disabled.background - disabled background
/// @prop {String} disabled.font-color - disabled font color
$_component-map;



/// @access public
/// @param {String} $component - component name reference
/// @param {Map} $map - component map
/// @example
///     @include component(ci-grey,(background:#9E9E9E));
@mixin component($component: null,$map:()) {

  $_white:#fff;
  $direction:map-get-default($map,direction,to bottom);
  $background: map-get($map,background);
  $font-color: map-get-default($map,font-color,$_white);
  $border: map-get($map,border);
  $text-shadow: map-get($map,text-shadow);
  $box-shadow: map-get($map,box-shadow);
  $icon-color: map-get($map,icon-color);
  $icon-text-shadow: map-get($map,icon-text-shadow);
  $placeholder-color:map-get($map,placeholder-color);
  $background-hover: map-nested-get($map,hover,background);
  $font-color-hover: map-nested-get($map,hover,font-color);
  $border-hover: map-nested-get($map,hover,border);
  $text-shadow-hover: map-nested-get($map,hover,text-shadow);
  $box-shadow-hover: map-nested-get($map,hover,box-shadow);
  $icon-color-hover: map-nested-get($map,hover,icon-color);
  $icon-text-shadow-hover: map-nested-get($map,hover,icon-text-shadow);
  $background-active: map-nested-get($map,active,background);
  $font-color-active: map-nested-get($map,active,font-color);
  $border-active: map-nested-get($map,active,border);
  $text-shadow-active: map-nested-get($map,active,text-shadow);
  $box-shadow-active: map-nested-get($map,active,box-shadow);
  $icon-color-active: map-nested-get($map,active,icon-color);
  $icon-text-shadow-active: map-nested-get($map,active,icon-text-shadow);
  $background-disabled: map-nested-get($map,disabled,background);
  $font-color-disabled: map-nested-get($map,disabled,font-color);


  %#{$component}-background {
    @include component-background($background,$direction);
  }

  %#{$component}-background-hover {
    @if $background-hover == null {
      @include component-background-hover($background,$direction);
    } @else {
      @include component-background($background-hover,$direction);
    }
  }

  %#{$component}-background-active {
    @if $background-active == null {
      @extend %#{$component}-background-hover !optional;
    } @else {
      @include component-background($background-active,$direction);
    }
  }

  %#{$component}-font {
    @include component-font($font-color, $text-shadow);
  }

  %#{$component}-font-hover {
    @if $font-color-hover !=null and $text-shadow-hover != null{
      @include component-font-hover($font-color-hover, $text-shadow-hover);
    } @else {
      @include component-font($font-color, $text-shadow);
      @include component-font-hover($font-color-hover, $text-shadow-hover);
    }
  }

  %#{$component}-font-active {
    @if $font-color-active !=null and $text-shadow-active != null{
      @include component-font-hover($font-color-active, $text-shadow-active);
    } @else {
      @extend %#{$component}-font-hover !optional;
      @include component-font-hover($font-color-active, $text-shadow-active);
    }
  }

  %#{$component}-border {
    @include component-border($border);
  }

  %#{$component}-border-hover {
    @if $border-hover != null {
      @include component-border($border-hover);
    } @else {
      @include component-border-hover($border);
    }
  }

  %#{$component}-border-active {
    @if $border-active == null {
      @extend %#{$component}-border-hover !optional;
    } @else {
      @include component-border($border-active);
    }
  }

  %#{$component}-box-shadow {
    @include component-box-shadow($box-shadow);
  }

  %#{$component}-box-shadow-hover {
    @if $box-shadow-hover == null {
      @extend %#{$component}-box-shadow !optional;
    } @else {
      @include component-box-shadow($box-shadow-hover);
    }
  }

  %#{$component}-box-shadow-active {
    @if $box-shadow-active == null {
      @include component-box-shadow-active();
    } @else {
      @include component-box-shadow($box-shadow-active);
    }
  }

  %#{$component}-icon {
    @if $icon-color == null and $icon-text-shadow == null{
      @extend %#{$component}-font !optional;
    } @else {
      @extend %#{$component}-font !optional;
      @include component-font-hover($icon-color, $icon-text-shadow);
    }
  }

  %#{$component}-icon-hover {
    @if $icon-color-hover != null{
      @include component-font-hover($icon-color-hover, $icon-text-shadow-hover);
    }@else{
      @extend %#{$component}-icon !optional;
    }
  }

  %#{$component}-icon-active {
    @if $icon-color-active != null{
      @include component-font-hover($icon-color-active, $icon-text-shadow-active);
    }@else{
      @extend %#{$component}-icon-hover !optional;
    }
  }

  %#{$component}-placeholder {
    $_placeholder-color:$font-color;
    @if $placeholder-color !=null{
      $_placeholder-color:$placeholder-color;
    }
    @include component-placeholder($_placeholder-color);
  }

  %#{$component}-disabled {
    @include component-disabled($background-disabled, $font-color-disabled,$background);
  }

}



/// touch component
/// @access public
/// @param {String} $component - component name reference
/// @param {Map} $map - component map
@mixin touch-component($component: null,$map:()) {
  @media #{$media-desktop}{
    @include component($component,$map);
  }
}




/// desktop component
/// @access public
/// @param {String} $component - component name reference
/// @param {Map} $map - component map
@mixin desktop-component($component: null,$map:()) {
  @media #{$media-desktop}{
    @include component($component,$map);
  }
}



/// extend component
/// @access public
/// @param {String} $component - new component reference
/// @param {String} $extend-component - existing component to extend
/// @param {Map} $map - component map properties that extend the existing component
/// @example
///     @include extend-component(ci-grey-ext,ci-grey,(active:(background:#009688)));
@mixin extend-component($component:null, $extend-component:null, $map:()) {

  $direction:map-get-default($map,direction,to bottom);
  $background: map-get($map,background);
  $font-color: map-get($map,font-color);
  $border: map-get($map,border);
  $text-shadow: map-get($map,text-shadow);
  $box-shadow: map-get($map,box-shadow);
  $icon-color: map-get($map,icon-color);
  $icon-text-shadow: map-get($map,icon-text-shadow);
  $placeholder-color:map-get($map,placeholder-color);
  $background-hover: map-nested-get($map,hover,background);
  $font-color-hover: map-nested-get($map,hover,font-color);
  $border-hover: map-nested-get($map,hover,border);
  $text-shadow-hover: map-nested-get($map,hover,text-shadow);
  $box-shadow-hover: map-nested-get($map,hover,box-shadow);
  $background-active: map-nested-get($map,active,background);
  $font-color-active: map-nested-get($map,active,font-color);
  $border-active: map-nested-get($map,active,border);
  $text-shadow-active: map-nested-get($map,active,text-shadow);
  $box-shadow-active: map-nested-get($map,active,box-shadow);
  $background-disabled: map-nested-get($map,disabled,background);
  $font-color-disabled: map-nested-get($map,disabled,font-color);


  %#{$component}-background {
    @if $background != null {
      @include component-background($background,$direction);
    } @else {
      @extend %#{$extend-component}-background !optional;
    }
  }

  %#{$component}-background-hover {
    @if $background-hover == null{
      @if $background != null{
        @include component-background-hover($background,$direction);
      }@else{
        @extend %#{$extend-component}-background-hover !optional;
      }
    }@else{
      @include component-background($background-hover,$direction);
    }
  }

  %#{$component}-background-active {
    @if $background-active != null {
      @include component-background($background-active,$direction);
    } @else {
      @extend %#{$extend-component}-background-active !optional;
    }
  }

  %#{$component}-font {
    @if type-of($font-color)== color and type-of($text-shadow)==list{
      @include component-font($font-color, $text-shadow);
    } @else {
      @extend %#{$extend-component}-font !optional;
      @include component-font-extended($font-color, $text-shadow);
    }
  }

  %#{$component}-font-hover {
    @if type-of($font-color-hover)== color and type-of($text-shadow-hover)==list{
      @include component-font-hover($font-color-hover, $text-shadow-hover);
    } @else {
      @extend %#{$extend-component}-font-hover !optional;
      @include component-font-hover($font-color-hover, $text-shadow-hover);
    }
  }

  %#{$component}-font-active {
    @if type-of($font-color-active)== color and type-of($text-shadow-active)==list{
      @include component-font-hover($font-color-active, $text-shadow-active);
    } @else {
      @extend %#{$extend-component}-font-active !optional;
      @include component-font-hover($font-color-active, $text-shadow-active);
    }
  }

  %#{$component}-border {
    @if $border != null{
      @include component-border($border);
    } @else {
      @extend %#{$extend-component}-border !optional;
    }
  }

  %#{$component}-border-hover {
    @if $border-hover != null{
      @include component-border($border-hover);
    } @else {
      @if type-of($border)== color or type-of($border) == list{
        @include component-border-hover($border);
      } @else {
        @extend %#{$extend-component}-border-hover !optional;
      }
    }
  }

  %#{$component}-border-active {
    @if $border-active != null{
      @include component-border($border-active);
    } @else {
      @extend %#{$extend-component}-border-active !optional;
    }
  }

  %#{$component}-box-shadow {
    @if $box-shadow != null{
      @include component-box-shadow($box-shadow);
    }@else{
      @extend %#{$extend-component}-box-shadow !optional;
    }
  }

  %#{$component}-box-shadow-hover {
    @if $box-shadow-hover != null{
      @include component-box-shadow($box-shadow-hover);
    }@else{
      @extend %#{$extend-component}-box-shadow-hover !optional;
    }
  }

  %#{$component}-box-shadow-active {
    @if $box-shadow-active != null{
      @include component-box-shadow($box-shadow-active);
    }@else{
      @extend %#{$extend-component}-box-shadow-active !optional;
    }
  }

  %#{$component}-icon {
    @extend %#{$extend-component}-icon !optional;
    @if $icon-color != null or $icon-text-shadow != null {
      @include component-font-extended($icon-color, $icon-text-shadow);
    }
  }

  %#{$component}-placeholder {
    @extend %#{$extend-component}-placeholder !optional;
    @if $placeholder-color != null {
      @include component-placeholder($placeholder-color);
    }
  }

  %#{$component}-disabled {
    @extend %#{$extend-component}-disabled !optional;
  }
}




/// extend touch component
/// @access public
/// @param {String} $component - new component reference
/// @param {String} $extend-component - existing component to extend
/// @param {Map} $map - component map properties that extend the existing component
@mixin extend-touch-component($component:null,$extend-component:null,$map:()) {
  @media #{$media-touch}{
    @include extend-component($extend-component, $component,$map);
  }
}



/// extend desktop component
/// @access public
/// @param {String} $component - new component reference
/// @param {String} $extend-component - existing component to extend
/// @param {Map} $map - component map properties that extend the existing component
@mixin extend-desktop-component($component:null,$extend-component:null,$map:()) {
  @media #{$media-desktop}{
    @include extend-component($extend-component, $component,$map);
  }
}



<commit_msg>corrected variable assignment<commit_after>@import "media";
@import "functions";
@import "mixins";

/// @type Map - definition of component map params
/// @prop {List} direction [to,bottom] - gradient direction
/// @prop {String} background - default state background
/// @prop {String} font-color [#fff] - default state font color
/// @prop {String} border - default state border
/// @prop {String} text-shadow - default state text shadow
/// @prop {String} box-shadow - default state box shadow
/// @prop {String} icon-color - default state icon color
/// @prop {String} icon-text-shadow - default state icon text shadow
/// @prop {String} placeholder-color - default state placeholder color
/// @prop {String} hover.background - hover background
/// @prop {String} hover.font-color - hover font color
/// @prop {String} hover.border - hover border
/// @prop {String} hover.text-shadow - hover text shadow
/// @prop {String} hover.box-shadow - hover box shadow
/// @prop {String} hover.icon-color - hover icon color
/// @prop {String} hover.icon-text-shadow - hover icon text shadow
/// @prop {String} active.background - active background
/// @prop {String} active.font-color - active font color
/// @prop {String} active.border - active border
/// @prop {String} active.text-shadow - active text shadow
/// @prop {String} active.box-shadow - active box shadow
/// @prop {String} active.icon-color - active icon color
/// @prop {String} active.icon-text-shadow - active icon text shadow
/// @prop {String} disabled.background - disabled background
/// @prop {String} disabled.font-color - disabled font color
$_component-map:null;



/// @access public
/// @param {String} $component - component name reference
/// @param {Map} $map - component map
/// @example
///     @include component(ci-grey,(background:#9E9E9E));
@mixin component($component: null,$map:()) {

  $_white:#fff;
  $direction:map-get-default($map,direction,to bottom);
  $background: map-get($map,background);
  $font-color: map-get-default($map,font-color,$_white);
  $border: map-get($map,border);
  $text-shadow: map-get($map,text-shadow);
  $box-shadow: map-get($map,box-shadow);
  $icon-color: map-get($map,icon-color);
  $icon-text-shadow: map-get($map,icon-text-shadow);
  $placeholder-color:map-get($map,placeholder-color);
  $background-hover: map-nested-get($map,hover,background);
  $font-color-hover: map-nested-get($map,hover,font-color);
  $border-hover: map-nested-get($map,hover,border);
  $text-shadow-hover: map-nested-get($map,hover,text-shadow);
  $box-shadow-hover: map-nested-get($map,hover,box-shadow);
  $icon-color-hover: map-nested-get($map,hover,icon-color);
  $icon-text-shadow-hover: map-nested-get($map,hover,icon-text-shadow);
  $background-active: map-nested-get($map,active,background);
  $font-color-active: map-nested-get($map,active,font-color);
  $border-active: map-nested-get($map,active,border);
  $text-shadow-active: map-nested-get($map,active,text-shadow);
  $box-shadow-active: map-nested-get($map,active,box-shadow);
  $icon-color-active: map-nested-get($map,active,icon-color);
  $icon-text-shadow-active: map-nested-get($map,active,icon-text-shadow);
  $background-disabled: map-nested-get($map,disabled,background);
  $font-color-disabled: map-nested-get($map,disabled,font-color);


  %#{$component}-background {
    @include component-background($background,$direction);
  }

  %#{$component}-background-hover {
    @if $background-hover == null {
      @include component-background-hover($background,$direction);
    } @else {
      @include component-background($background-hover,$direction);
    }
  }

  %#{$component}-background-active {
    @if $background-active == null {
      @extend %#{$component}-background-hover !optional;
    } @else {
      @include component-background($background-active,$direction);
    }
  }

  %#{$component}-font {
    @include component-font($font-color, $text-shadow);
  }

  %#{$component}-font-hover {
    @if $font-color-hover !=null and $text-shadow-hover != null{
      @include component-font-hover($font-color-hover, $text-shadow-hover);
    } @else {
      @include component-font($font-color, $text-shadow);
      @include component-font-hover($font-color-hover, $text-shadow-hover);
    }
  }

  %#{$component}-font-active {
    @if $font-color-active !=null and $text-shadow-active != null{
      @include component-font-hover($font-color-active, $text-shadow-active);
    } @else {
      @extend %#{$component}-font-hover !optional;
      @include component-font-hover($font-color-active, $text-shadow-active);
    }
  }

  %#{$component}-border {
    @include component-border($border);
  }

  %#{$component}-border-hover {
    @if $border-hover != null {
      @include component-border($border-hover);
    } @else {
      @include component-border-hover($border);
    }
  }

  %#{$component}-border-active {
    @if $border-active == null {
      @extend %#{$component}-border-hover !optional;
    } @else {
      @include component-border($border-active);
    }
  }

  %#{$component}-box-shadow {
    @include component-box-shadow($box-shadow);
  }

  %#{$component}-box-shadow-hover {
    @if $box-shadow-hover == null {
      @extend %#{$component}-box-shadow !optional;
    } @else {
      @include component-box-shadow($box-shadow-hover);
    }
  }

  %#{$component}-box-shadow-active {
    @if $box-shadow-active == null {
      @include component-box-shadow-active();
    } @else {
      @include component-box-shadow($box-shadow-active);
    }
  }

  %#{$component}-icon {
    @if $icon-color == null and $icon-text-shadow == null{
      @extend %#{$component}-font !optional;
    } @else {
      @extend %#{$component}-font !optional;
      @include component-font-hover($icon-color, $icon-text-shadow);
    }
  }

  %#{$component}-icon-hover {
    @if $icon-color-hover != null{
      @include component-font-hover($icon-color-hover, $icon-text-shadow-hover);
    }@else{
      @extend %#{$component}-icon !optional;
    }
  }

  %#{$component}-icon-active {
    @if $icon-color-active != null{
      @include component-font-hover($icon-color-active, $icon-text-shadow-active);
    }@else{
      @extend %#{$component}-icon-hover !optional;
    }
  }

  %#{$component}-placeholder {
    $_placeholder-color:$font-color;
    @if $placeholder-color !=null{
      $_placeholder-color:$placeholder-color;
    }
    @include component-placeholder($_placeholder-color);
  }

  %#{$component}-disabled {
    @include component-disabled($background-disabled, $font-color-disabled,$background);
  }

}



/// touch component
/// @access public
/// @param {String} $component - component name reference
/// @param {Map} $map - component map
@mixin touch-component($component: null,$map:()) {
  @media #{$media-desktop}{
    @include component($component,$map);
  }
}




/// desktop component
/// @access public
/// @param {String} $component - component name reference
/// @param {Map} $map - component map
@mixin desktop-component($component: null,$map:()) {
  @media #{$media-desktop}{
    @include component($component,$map);
  }
}



/// extend component
/// @access public
/// @param {String} $component - new component reference
/// @param {String} $extend-component - existing component to extend
/// @param {Map} $map - component map properties that extend the existing component
/// @example
///     @include extend-component(ci-grey-ext,ci-grey,(active:(background:#009688)));
@mixin extend-component($component:null, $extend-component:null, $map:()) {

  $direction:map-get-default($map,direction,to bottom);
  $background: map-get($map,background);
  $font-color: map-get($map,font-color);
  $border: map-get($map,border);
  $text-shadow: map-get($map,text-shadow);
  $box-shadow: map-get($map,box-shadow);
  $icon-color: map-get($map,icon-color);
  $icon-text-shadow: map-get($map,icon-text-shadow);
  $placeholder-color:map-get($map,placeholder-color);
  $background-hover: map-nested-get($map,hover,background);
  $font-color-hover: map-nested-get($map,hover,font-color);
  $border-hover: map-nested-get($map,hover,border);
  $text-shadow-hover: map-nested-get($map,hover,text-shadow);
  $box-shadow-hover: map-nested-get($map,hover,box-shadow);
  $background-active: map-nested-get($map,active,background);
  $font-color-active: map-nested-get($map,active,font-color);
  $border-active: map-nested-get($map,active,border);
  $text-shadow-active: map-nested-get($map,active,text-shadow);
  $box-shadow-active: map-nested-get($map,active,box-shadow);
  $background-disabled: map-nested-get($map,disabled,background);
  $font-color-disabled: map-nested-get($map,disabled,font-color);


  %#{$component}-background {
    @if $background != null {
      @include component-background($background,$direction);
    } @else {
      @extend %#{$extend-component}-background !optional;
    }
  }

  %#{$component}-background-hover {
    @if $background-hover == null{
      @if $background != null{
        @include component-background-hover($background,$direction);
      }@else{
        @extend %#{$extend-component}-background-hover !optional;
      }
    }@else{
      @include component-background($background-hover,$direction);
    }
  }

  %#{$component}-background-active {
    @if $background-active != null {
      @include component-background($background-active,$direction);
    } @else {
      @extend %#{$extend-component}-background-active !optional;
    }
  }

  %#{$component}-font {
    @if type-of($font-color)== color and type-of($text-shadow)==list{
      @include component-font($font-color, $text-shadow);
    } @else {
      @extend %#{$extend-component}-font !optional;
      @include component-font-extended($font-color, $text-shadow);
    }
  }

  %#{$component}-font-hover {
    @if type-of($font-color-hover)== color and type-of($text-shadow-hover)==list{
      @include component-font-hover($font-color-hover, $text-shadow-hover);
    } @else {
      @extend %#{$extend-component}-font-hover !optional;
      @include component-font-hover($font-color-hover, $text-shadow-hover);
    }
  }

  %#{$component}-font-active {
    @if type-of($font-color-active)== color and type-of($text-shadow-active)==list{
      @include component-font-hover($font-color-active, $text-shadow-active);
    } @else {
      @extend %#{$extend-component}-font-active !optional;
      @include component-font-hover($font-color-active, $text-shadow-active);
    }
  }

  %#{$component}-border {
    @if $border != null{
      @include component-border($border);
    } @else {
      @extend %#{$extend-component}-border !optional;
    }
  }

  %#{$component}-border-hover {
    @if $border-hover != null{
      @include component-border($border-hover);
    } @else {
      @if type-of($border)== color or type-of($border) == list{
        @include component-border-hover($border);
      } @else {
        @extend %#{$extend-component}-border-hover !optional;
      }
    }
  }

  %#{$component}-border-active {
    @if $border-active != null{
      @include component-border($border-active);
    } @else {
      @extend %#{$extend-component}-border-active !optional;
    }
  }

  %#{$component}-box-shadow {
    @if $box-shadow != null{
      @include component-box-shadow($box-shadow);
    }@else{
      @extend %#{$extend-component}-box-shadow !optional;
    }
  }

  %#{$component}-box-shadow-hover {
    @if $box-shadow-hover != null{
      @include component-box-shadow($box-shadow-hover);
    }@else{
      @extend %#{$extend-component}-box-shadow-hover !optional;
    }
  }

  %#{$component}-box-shadow-active {
    @if $box-shadow-active != null{
      @include component-box-shadow($box-shadow-active);
    }@else{
      @extend %#{$extend-component}-box-shadow-active !optional;
    }
  }

  %#{$component}-icon {
    @extend %#{$extend-component}-icon !optional;
    @if $icon-color != null or $icon-text-shadow != null {
      @include component-font-extended($icon-color, $icon-text-shadow);
    }
  }

  %#{$component}-placeholder {
    @extend %#{$extend-component}-placeholder !optional;
    @if $placeholder-color != null {
      @include component-placeholder($placeholder-color);
    }
  }

  %#{$component}-disabled {
    @extend %#{$extend-component}-disabled !optional;
  }
}




/// extend touch component
/// @access public
/// @param {String} $component - new component reference
/// @param {String} $extend-component - existing component to extend
/// @param {Map} $map - component map properties that extend the existing component
@mixin extend-touch-component($component:null,$extend-component:null,$map:()) {
  @media #{$media-touch}{
    @include extend-component($extend-component, $component,$map);
  }
}



/// extend desktop component
/// @access public
/// @param {String} $component - new component reference
/// @param {String} $extend-component - existing component to extend
/// @param {Map} $map - component map properties that extend the existing component
@mixin extend-desktop-component($component:null,$extend-component:null,$map:()) {
  @media #{$media-desktop}{
    @include extend-component($extend-component, $component,$map);
  }
}




{'fraction_non_alphanumeric': 0.182940260529414, 'fraction_numerical': 0.0006836048763814515, 'mean_word_length': 3.6172190075398913, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6246084', 'n_tokens_mistral': 8309, 'n_tokens_neox': 8055, 'n_words': 1530}