// ============================================================
//          Shared Classes                                  
// -----------------------------------------------------------*/

+route(style,base)
  //**
  // Class:     .clearfix
  // Description: Clearfix Class
  //**
  .clearfix
    +cf

  //**
  // Class:     .clear
  // Description: Normal Float Clearing
  //**
  .clear
    +clear

  //**
  // Class:     .cropped
  // Description: Crop the Block element with overflow Hidden
  //**
  .cropped
    overflow: hidden

  //**
  // Class:     .scrollable
  // Description: Makes an Element scrollable
  //**
  .scrollable
    overflow: auto
    > :last-child
      margin-bottom: 0

  //**
  // Class:     .float--left
  // Description: Floats the Element to the left
  //**
  .float-left
    float: left
    @if nth($layout-fluid-behavior,2) != false
      @media (max-width: nth($layout-second-grid,1) + 0px)
        &.opposite_n
          float: right
        &.unfloat_n
          float: none

      @media (max-width: $bp-mobile  - 1px) 
        &.opposite_s
          float: right
        &.unfloat_s
          float: none
  //**
  // Class:     .float--right
  // Description: Floats the Element to the right
  //**
  .float-right
    float: right
    @if nth($layout-fluid-behavior,2) != false
      @media (max-width: nth($layout-second-grid,1) + 0px)
        &.opposite_n
          float: left
        &.unfloat_n
          float: none

      @media (max-width: $bp-mobile  - 1px) 
        &.opposite_s
          float: left
        &.unfloat_s
          float: none

  //**
  // Class:     .block
  // Description: Makes a block Element
  //**
  .block
    display: block

  //**
  // Class:     .center
  // Description: Center a Element
  //**
  .center
    margin-left  : auto
    margin-right : auto

  //**
  // Class:     .relative
  // Description: Gives an Element position:relative
  //**
  .relative
    position: relative

  //**
  // Class:     .center--block
  // Description: Transform to a Blockelement and Center
  //**
  .center-block
    @extend .block
    @extend .center

  //**
  // Class:     .uppercase
  // Description: Transform text to uppercase
  //**
  .uppercase
    text-transform: uppercase

  //**
  // Class:     .lowercase
  // Description: Transform text to lowercase
  //**
  .lowercase
    text-transform: lowercase

  //**
  // Class:     .info
  // Description: Add the Help Cursor
  //**
  .info
    cursor: help

  //**
  // Class:     .muted
  // Description: Mute an object by reduce the opacity
  //**
  .muted 
    +opacity(0.5)

  [disabled='disabled']
    @extend .muted
    cursor: not-allowed

  //**
  // Class:     .text--left
  // Description: Align the Text to the left
  //**
  .text-left
    text-align: left
    @if nth($layout-fluid-behavior,2) != false
      @media (max-width: nth($layout-second-grid,1) + 0px)
        &.opposite_n
          text-align: right

      @media (max-width: $bp-mobile  - 1px) 
        &.opposite_s
          text-align: right

  //**
  // Class:     .text--right
  // Description: Align the Text to the right
  //**
  .text-right
    text-align: right
    @if nth($layout-fluid-behavior,2) != false
      @media (max-width: nth($layout-second-grid,1) + 0px)
        &.opposite_n
          text-align: left

      @media (max-width: $bp-mobile  - 1px) 
        &.opposite_s
          text-align: left

  //**
  // Class:     .text--center
  // Description: Center Textelements
  //**
  .text-center
    text-align: center

  //**
  // Class:     .text--justify
  // Description: Justify Textelements
  //**
  .text-justify
    text-align: justify

  //**
  // Class:     .middle
  // Description: Vertical Center an Element
  //**
  .middle
    +vertical-center

  //**
  // Class:     .middle--center
  // Description: Vertical and horizontal center an element
  //**
  .middle_center
    @extend .middle
    @extend .text-center

  //**
  // Class:     .flush
  // Description: Remove all Margin 
  //**
  .flush
    margin: 0 !important

  //**
  // Class:     .flush-top
  // Description: Remove the Top Margin
  //**
  .flush-top
    margin-top: 0 !important

  //**
  // Class:     .flush-bottom
  // Description: Remove the Bottom Margin
  //**
  .flush-bottom
    margin-bottom: 0 !important

  //**
  // Class:     .flush-left
  // Description: Remove the left Margin
  //**
  .flush-left
    margin-left: 0 !important

  //**
  // Class:     .flush-right
  // Description: Remove the right Margin
  //**
  .flush-right
    margin-right: 0 !important

  //**
  // Class:     .flush-ends
  // Description: Remove the margin on top and bottom
  //**
  .flush-ends
    @extend .flush-top
    @extend .flush-bottom

  //**
  // Class:     .flush-sides
  // Description: Remove the margin on left and right
  //**
  .flush-sides
    @extend .flush-left
    @extend .flush-right

  //**
  // Class:     .flood
  // Description: Remove all paddings
  //**
  .flood
    padding: 0 !important

  //**
  // Class:     .flood-top
  // Description: Remove top padding
  //**
  .flood-top
    padding-top: 0 !important

  //**
  // Class:     .flood-bottom
  // Description: Remove bottom padding
  //**
  .flood-bottom
    padding-bottom: 0 !important

  //**
  // Class:     .flood-left
  // Description: Remove left padding
  //**
  .flood-left
    padding-left: 0 !important

  //**
  // Class:     .flood-right
  // Description: Remove right padding
  //**
  .flood-right
    padding-right: 0 !important

  //**
  // Class:     .flood-ends
  // Description: Remove top and bottom padding
  //**
  .flood-ends
    @extend .flood-top
    @extend .flood-bottom

  //**
  // Class:     .flood-sides
  // Description: Remove left and right padding
  //**
  .flood-sides
    @extend .flood-left
    @extend .flood-right
  
  //**
  // Class:     .clearfoot
  // Description: Remove the Bottom Margin of the last Child Element
  //**
  .clearfoot
    > *:last-child, > *:last-child > *:last-child, > *:last-child > *:last-child > *:last-child
      margin-bottom: 0

  //**
  // Class:     .bar-absolute_top
  // Description: Modify the Positionmode, make it absolute and bring it on the Top
  //**
  .bar-absolute_top
    +bar-top($variant: a)

  //**
  // Class:     .bar-absolute_bottom
  // Description: Modify the Positionmode, make it absolute and bring it on the Bottom
  //**
  .bar-absolute_bottom
    +bar-bottom($variant: a)
  //**
  // Class:     .bar-fixed_top
  // Description: Modify the Positionmode, make it fixed and bring it on the Top
  //**
  .bar-fixed_top
    +bar-top

  //**
  // Class:     .bar_fixed-bottom
  // Description: Modify the Positionmode, make it fixed and bring it on the Bottom
  //**
  .bar-fixed_bottom
    +bar-bottom

  //**
  // Class:     .hidden
  // Description: Hides an Element
  //**
  .hidden
    display: none

  //**
  // Class:     .invisible
  // Description: Make an Element invisible
  //**
  .invisible
    visibility: hidden

  //**
  // Class:     .fluid
  // Description: Make an Element fluid to the max size
  //**
  .fluid
    max-width: 100% 
    height: auto 

  //**
  // Class:     .fluid-full
  // Description: Make an Element max fluid
  //**
  .fluid-full
    width: 100%
    height: auto

  //**
  // Class:     .flex-video
  // Description: Make an Media Element fluid (like iframe,object, embed)
  //**
  .flex-video
    position: relative
    padding-top: 25px
    padding-bottom: 67.5%
    height: 0
    margin-bottom: 16px
    overflow: hidden
    &.widescreen
      padding-bottom: 56.25%
    &.cinema
      padding-bottom: 43.25%
    &.vimeo
      padding-top: 0
    iframe, object, embed, video
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%

  //**
  // Class:     .word-wrap
  // Description: Break long Wordings
  //**
  .word-wrap
    +word-wrap

  //**
  // Class:     .text-truncate
  // Description: Break long Wordings with ellipsis
  //**
  .text-truncate
    +text-truncate

+route(style,theme,child)
  //**
  // Class:     .c-primary
  // Description: Text Colors to Primary Color
  //**
  .c-primary
    color: $c-primary

  //**
  // Class:     .c-secondary
  // Description: Text Colors to secondary Color
  //**
  .c-secondary
    color: $c-secondary

  //**
  // Class:     .c-third
  // Description: Text Colors to third Color
  //**
  .c-third
    color: $c-third

  //**
  // Class:     .c-fouth
  // Description: Text Colors to fouth Color
  //**
  .c-fourth
    color: $c-fourth

  //**
  // Class:     .c-fifth
  // Description: Text Colors to fifth Color
  //**
  .c-fifth
    color: $c-fifth

  //**
  // Class:     .c-sixth
  // Description: Text Colors to sixth Color
  //**
  .c-sixth
    color: $c-sixth

  //**
  // Class:     .c-black
  // Description: Text Colors to black Color
  //**
  .c-black
    color: $c-black

  //**
  // Class:     .c-white
  // Description: Text Colors to white Color
  //**
  .c-white
    color: $c-white

  //**
  // Class:     .c-gray
  // Description: Text Colors to gray Color
  //**
  .c-gray
    color: $c-gray

  //**
  // Class:     .c-alert
  // Description: Text Colors to alert Color
  //**
  .c-alert
    color: $c-alert

  //**
  // Class:     .c-success
  // Description: Text Colors to success Color
  //**
  .c-success
    color: $c-success

  //**
  // Class:     .c-warning
  // Description: Text Colors to warning Color
  //**
  .c-warning
    color: $c-warning

  //**
  // Class:     .c-highlight
  // Description: Text Colors to highlight Color
  //**
  .c-highlight
    color: $c-highlight

  //**
  // Class:     .bg-primary
  // Description: Background Color to primary Color
  //**
  .bg-primary
    background-color: $c-primary

  //**
  // Class:     .bg-secondary
  // Description: Background Color to secondary Color
  //**
  .bg-secondary
    background-color: $c-secondary

  //**
  // Class:     .bg-third
  // Description: Background Color to third Color
  //**
  .bg-third
    background-color: $c-third

  //**
  // Class:     .bg-fourth
  // Description: Background Color to fourth Color
  //**
  .bg-fourth
    background-color: $c-fourth

  //**
  // Class:     .bg-fifth
  // Description: Background Color to fifth Color
  //**
  .bg-fifth
    background-color: $c-fifth

  //**
  // Class:     .bg-sixth
  // Description: Background Color to sixth Color
  //**
  .bg-sixth
    background-color: $c-sixth

  //**
  // Class:     .bg-white
  // Description: Background Color to white Color
  //**
  .bg-white
    background-color: $c-white

  //**
  // Class:     .bg-black
  // Description: Background Color to black Color
  //**
  .bg-black
    background-color: $c-black

  //**
  // Class:     .bg-gray
  // Description: Background Color to gray Color
  //**
  .bg-gray
    background-color: $c-gray

  //**
  // Class:     .bg-alert
  // Description: Background Color to alert Color
  //**
  .bg-alert
    background-color: $c-alert

  //**
  // Class:     .bg-success
  // Description: Background Color to success Color
  //**
  .bg-success
    background-color: $c-success

  //**
  // Class:     .bg-warning
  // Description: Background Color to warning Color
  //**
  .bg-warning
    background-color: $c-warning

  //**
  // Class:     .bg-highlight
  // Description: Background Color to highlight Color
  //**
  .bg-highlight
    background-color: $c-highlight

+route(style,base)
  //**
  // Class:     .round-pille
  // Description: Circle rounding on all sides
  //**
  .round-pille
    +border-radius(100px !important)

  //**
  // Class:     .round-pille-left
  // Description: Circle rounding on the left side
  //**
  .round-pille-left
    +border-radius(100px 0 0 100px !important)

  //**
  // Class:     .round-pille-right
  // Description: Circle rounding on the right side
  //**
  .round-pille-right
    +border-radius(0 100px 100px 0 !important)

  //**
  // Class:     .round-pille-top
  // Description: Circle rounding on the top side
  //**
  .round-pille-top
    +border-radius(100px 100px 0 0 !important)

  //**
  // Class:     .round-pille-bottom
  // Description: Circle rounding on the bottom side
  //**
  .round-pille-bottom
    +border-radius(0 0 100px 100px !important)

  //**
  // Class:     .round
  // Description: Normal Rounding Border Class
  //**
  .round
    +border-radius(($round-normal + 0px) !important)
    
  @if nth($layout-fluid-behavior,2) != false
    .round_n
      @media (max-width: nth($layout-second-grid,1) + 0px)
        +border-radius(($round-normal + 0px) !important)
    .round_s
      @media (max-width: $bp-mobile  - 1px) 
        +border-radius(($round-normal + 0px) !important)
  //**
  // Class:     .round-left
  // Description: Normal Rounding on the left Side
  //**
  .round-left
    +border-radius(($round-normal + 0px) 0 0 ($round-normal + 0px) !important)
    @if nth($layout-fluid-behavior,2) != false
      &.rotate_n
        @media (max-width: nth($layout-second-grid,1) + 0px)
          +border-radius(($round-normal + 0px) ($round-normal + 0px) 0 0 !important)
      &.rotate_s
        @media (max-width: $bp-mobile  - 1px) 
          +border-radius(($round-normal + 0px) ($round-normal + 0px) 0 0 !important)

      &.fullround_n
        @media (max-width: nth($layout-second-grid,1) + 0px)
          +border-radius(($round-normal + 0px) !important)
      &.fullround_s
        @media (max-width: $bp-mobile  - 1px) 
          +border-radius(($round-normal + 0px) !important)
  //**
  // Class:     .round-right
  // Description: Normal rounding on the right side
  //**
  .round-right
    +border-radius(0 ($round-normal + 0px) ($round-normal + 0px) 0 !important)
    @if nth($layout-fluid-behavior,2) != false
      &.rotate_n
        @media (max-width: nth($layout-second-grid,1) + 0px)
          +border-radius(0 0 ($round-normal + 0px) ($round-normal + 0px) !important)
      &.rotate_s
        @media (max-width: $bp-mobile  - 1px) 
          +border-radius(0 0 ($round-normal + 0px) ($round-normal + 0px) !important)
      &.fullround_n
        @media (max-width: nth($layout-second-grid,1) + 0px)
          +border-radius(($round-normal + 0px) !important)
      &.fullround_s
        @media (max-width: $bp-mobile  - 1px) 
          +border-radius(($round-normal + 0px) !important)
  //**
  // Class:     .round-top
  // Description: Normal rounding on the top side
  //**
  .round-top
    +border-radius(($round-normal + 0px) ($round-normal + 0px) 0 0 !important)
    @if nth($layout-fluid-behavior,2) != false
      &.fullround_n
        @media (max-width: nth($layout-second-grid,1) + 0px)
          +border-radius(($round-normal + 0px) !important)
      &.fullround_s
        @media (max-width: $bp-mobile  - 1px) 
          +border-radius(($round-normal + 0px) !important)
  //**
  // Class:     .round-bottom
  // Description: Normal rounding on the bottom side
  //**
  .round-bottom
    +border-radius(0 0 ($round-normal + 0px) ($round-normal + 0px) !important)
    @if nth($layout-fluid-behavior,2) != false
      &.fullround_n
        @media (max-width: nth($layout-second-grid,1) + 0px)
          +border-radius(($round-normal + 0px) !important)
      &.fullround_s
        @media (max-width: $bp-mobile  - 1px) 
          +border-radius(($round-normal + 0px) !important)

  @if $round-slight != false
    //**
    // Class:     .round-slight
    // Description: Slight rounding on all sides
    //**
    .round-slight
      +border-radius(($round-slight + 0px) !important)

    @if nth($layout-fluid-behavior,2) != false
      .round-slight_n
        @media (max-width: nth($layout-second-grid,1) + 0px)
          +border-radius(($round-slight + 0px) !important)
      .round-slight_s
        @media (max-width: $bp-mobile  - 1px) 
          +border-radius(($round-slight + 0px) !important)
      //**
      // Class:     .round-slight-left
      // Description: Slight rounding on the left side
      //**
      .round-slight-left
        +border-radius(($round-slight + 0px) 0 0 ($round-slight + 0px) !important)
        @if nth($layout-fluid-behavior,2) != false
          &.rotate_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(($round-slight + 0px) ($round-slight + 0px) 0 0 !important)
          &.rotate_s
            @media (max-width: $bp-mobile  - 1px) 
              +border-radius(($round-slight + 0px) ($round-slight + 0px) 0 0 !important)
          &.fullround_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(($round-slight + 0px) !important)
          &.fullround_s
            @media (max-width: $bp-mobile  - 1px)
              +border-radius(($round-slight + 0px) !important)
      //**
      // Class:     .round-slight-right
      // Description: Slight rounding on the right side
      //**
      .round-slight-right
        +border-radius(0 ($round-slight + 0px) ($round-slight + 0px) 0 !important)
        @if nth($layout-fluid-behavior,2) != false
          &.rotate_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(0 0 ($round-slight + 0px) ($round-slight + 0px) !important)
          &.rotate_s
            @media (max-width: $bp-mobile  - 1px) 
              +border-radius(0 0 ($round-slight + 0px) ($round-slight + 0px) !important)
          &.fullround_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(($round-slight + 0px) !important)
          &.fullround_s
            @media (max-width: $bp-mobile  - 1px)
              +border-radius(($round-slight + 0px) !important)
      //**
      // Class:     .round-slight-top
      // Description: Slight rounding on the top side
      //**
      .round-slight-top
        +border-radius(($round-slight + 0px) ($round-slight + 0px) 0 0 !important)
        @if nth($layout-fluid-behavior,2) != false
          &.fullround_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(($round-slight + 0px) !important)
          &.fullround_s
            @media (max-width: $bp-mobile  - 1px) 
              +border-radius(($round-slight + 0px) !important)
      //**
      // Class:     .round-slight-bottom
      // Description: Slight rounding on the bottom side
      //**
      .round-slight-bottom
        +border-radius(0 0 ($round-slight + 0px) ($round-slight + 0px) !important)
        @if nth($layout-fluid-behavior,2) != false
          &.fullround_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(($round-slight + 0px) !important)
          &.fullround_s
            @media (max-width: $bp-mobile  - 1px)
              +border-radius(($round-slight + 0px) !important)

  @if $round-light != false
    //**
    // Class:     .round-light
    // Description: Light rounding on all sides
    //**
    .round-light
      +border-radius(($round-light + 0px) !important)

    @if nth($layout-fluid-behavior,2) != false
      .round-light_n
        @media (max-width: nth($layout-second-grid,1) + 0px)
          +border-radius(($round-light + 0px) !important)
      .round-light_s
        @media (max-width: $bp-mobile  - 1px) 
          +border-radius(($round-light + 0px) !important)

      //**
      // Class:     .round-light-left
      // Description: Light rounding on the left side
      //**
      .round-light-left
        +border-radius(($round-light + 0px) 0 0 ($round-light + 0px) !important)
        @if nth($layout-fluid-behavior,2) != false
          &.rotate_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(($round-light + 0px) ($round-light + 0px) 0 0 !important)
          &.rotate_s
            @media (max-width: $bp-mobile  - 1px) 
              +border-radius(($round-light + 0px) ($round-light + 0px) 0 0 !important)
          &.fullround_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(($round-light + 0px) !important)
          &.fullround_s
            @media (max-width: $bp-mobile  - 1px) 
              +border-radius(($round-light + 0px) !important)
      //**
      // Class:     .round-light-right
      // Description: Light rounding on the right side
      //**
      .round-light-right
        +border-radius(0 ($round-light + 0px) ($round-light + 0px) 0 !important)
        @if nth($layout-fluid-behavior,2) != false
          &.rotate_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(0 0 ($round-light + 0px) ($round-light + 0px) !important)
          &.rotate_s
            @media (max-width: $bp-mobile  - 1px) 
              +border-radius(0 0 ($round-light + 0px) ($round-light + 0px) !important)
          &.fullround_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(($round-light + 0px) !important)
          &.fullround_s
            @media (max-width: $bp-mobile  - 1px) 
              +border-radius(($round-light + 0px) !important)
      //**
      // Class:     .round-light-top
      // Description: Light rounding on the top side
      //**
      .round-light-top
        +border-radius(($round-light + 0px) ($round-light + 0px) 0 0 !important)
        @if nth($layout-fluid-behavior,2) != false
          &.fullround_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(($round-light + 0px) !important)
          &.fullround_s
            @media (max-width: $bp-mobile  - 1px) 
              +border-radius(($round-light + 0px) !important)

      //**
      // Class:     .round-light-bottom
      // Description: Light rounding on the bottom side
      //**
      .round-light-bottom
        +border-radius(0 0 ($round-light + 0px) ($round-light + 0px) !important)
        @if nth($layout-fluid-behavior,2) != false
          &.fullround_n
            @media (max-width: nth($layout-second-grid,1) + 0px)
              +border-radius(($round-light + 0px) !important)
          &.fullround_s
            @media (max-width: $bp-mobile  - 1px) 
              +border-radius(($round-light + 0px) !important)

          
  // ---- Visibility Classes ----
  @if nth($layout-fluid-behavior,2) != false
    @if $visibility-classes == true
      $slice-amount:  length($slicer-breakpoints)
      [class*="show-from-"],[class^="show-from-"],[class*="show-to-"],[class^="show-to-"],[class*="show-between-"],[class^="show-between-"]
        display: none !important

      @if $mobile-first == true
        @for $i from 1 through ($slice-amount)
          .show-from-#{$i}
            +from($i)
              display: inherit !important
          .show-to-#{$i} 
            +to($i)
              display: inherit !important
          .hide-from-#{$i}
            +from($i)
              display: none !important
          .hide-to-#{$i}
            +to($i)
              display: none !important
      @else
        @for $i from (0 - $slice-amount) through -1
          .show-from-#{abs($i)}
            +from(abs($i))
              display: inherit !important
          .show-to-#{abs($i)} 
            +to(abs($i))
              display: inherit !important
          .hide-from-#{abs($i)}
            +from(abs($i))
              display: none !important
          .hide-to-#{abs($i)}
            +to(abs($i))
              display: none !important

      @for $s from 1 through ($slice-amount - 2)
        @for $r from ($slice-amount - $s + 1) through ($slice-amount)
          +between(($slice-amount - $s), ($r - 1))
            .show-between-#{$slice-amount - $s}-#{$r - 1}
              display: inherit !important
            .hide-between-#{$slice-amount - $s}-#{$r - 1}
              display: none !important

    .show-on-landscape
      display: none !important
      @media only screen and (orientation: landscape)
        display: inherit !important

    .show-on-portrait
      display: none !important
      @media only screen and (orientation: portrait)
        display: inherit !important

    .hide-on-landscape
      display: inherit !important
      @media only screen and (orientation: landscape)
        display: block !important

    .hide-on-portrait
      display: inherit !important
      @media only screen and (orientation: portrait)
        display: block !important