//Responsive utilities

//
//@variables
//

// General settings

$media-display: "only screen" !default;

// Responsive screen sizes
$extra-small-screen: 34.28571429rem !default;
$extra-small-screen-max: 34.21428571rem !default;
$extra-small-media: "(max-width: #{$extra-small-screen-max})" !default;

$small-screen: 54.85714286rem !default;
$small-screen-max: 54.78571429rem !default;
$small-screen-media: "(max-width: #{$small-screen-max})" !default;
$small-screen-range: "(min-width: #{$small-screen}) and (max-width: #{$small-screen-max})" !default;

$medium-screen: 70.85714286rem !default;
$medium-screen-max: 70.78571429rem !default;
$medium-screen-range: "(min-width: #{$medium-screen}) and (max-width: #{$medium-screen-max})" !default;

$large-screen: 85.71428571rem !default;
$large-screen-range: "(min-width: #{$large-screen})" !default;

// Responsive screen orientations
$portrait-media: "#{$media-display} and (orientation: portrait)" !default;
$landscape-media: "#{$media-display} and (orientation: landscape)" !default;


//Visible on extra small style
.visible-on-xsmall {
  @include responsive-invisibility();
  @media #{$extra-small-media} {
    @include responsive-visibility();
  }
  &.visible-on-small {
    @media #{$small-screen-range} {
      @include responsive-visibility();
    }
  }
  &.visible-on-medium {
    @media #{$medium-screen-range} {
      @include responsive-visibility();
    }
  }
  &.visible-on-large {
    @media  #{$large-screen-range} {
      @include responsive-visibility();
    }
  }
}

//Visible on small style
.visible-on-small {
  @include responsive-invisibility();
  &.visible-on-xsmall {
    @media #{$extra-small-media} {
      @include responsive-visibility();
    }
  }
  @media #{$small-screen-range} {
    @include responsive-visibility();
  }
  &.visible-on-medium {
    @media #{$medium-screen-range} {
      @include responsive-visibility();
    }
  }
  &.visible-on-large {
    @media  #{$large-screen-range} {
      @include responsive-visibility();
    }
  }
}

//Visible on medium style
.visible-on-medium {
  @include responsive-invisibility();

  &.visible-xs {
    @media #{$extra-small-media} {
      @include responsive-visibility();
    }
  }
  &.visible-sm {
    @media #{$small-screen-range} {
      @include responsive-visibility();
    }
  }
  @media #{$medium-screen-range} {
    @include responsive-visibility();
  }
  &.visible-lg {
    @media  #{$large-screen-range} {
      @include responsive-visibility();
    }
  }
}

//Visible on large style
.visible-on-large {
  @include responsive-invisibility();
  &.visible-on-xsmall {
    @media #{$extra-small-media} {
      @include responsive-visibility();
    }
  }
  &.visible-on-small {
    @media #{$small-screen-range} {
      @include responsive-visibility();
    }
  }
  &.visible-on-medium {
    @media #{$medium-screen-range} {      
      @include responsive-visibility();
    }
  }
  @media #{$large-screen-range} {
    @include responsive-visibility();
  }
}

//Hidden on extra small style
.hidden-on-xsmall {
  @include responsive-visibility();
  @media #{$small-screen-media} {
    @include responsive-invisibility();
  }
  &.hidden-on-small {
    @media #{$small-screen-range} {
      @include responsive-invisibility();
    }
  }
  &.hidden-on-medium {
    @media #{$medium-screen-range} {
      @include responsive-invisibility();
    }
  }
  &.hidden-on-large {
    @media #{$large-screen-range} {
      @include responsive-invisibility();
    }
  }
}

//Hidden on small style
.hidden-on-small {
  @include responsive-visibility();
  &.hidden-on-xsmall {
    @media #{$extra-small-media} {
      @include responsive-invisibility();
    }
  }
  @media #{$small-screen-range} {
    @include responsive-invisibility();
  }
  &.hidden-on-medium {
    @media #{$medium-screen-range} {
      @include responsive-invisibility();
    }
  }
  &.hidden-on-large {
    @media #{$large-screen-range} {
      @include responsive-invisibility();
    }
  }
}

//Hidden on medium style
.hidden-on-medium {
  @include responsive-visibility();
  &.hidden-on-xsmall {
    @media #{$extra-small-media} {
      @include responsive-invisibility();
    }
  }
  &.hidden-on-small {
    @media #{$small-screen-range} {
      @include responsive-invisibility();
    }
  }
  @media #{$medium-screen-range} {
    @include responsive-invisibility();
  }
  &.hidden-on-large {
    @media #{$large-screen-range} {
      @include responsive-invisibility();
    }
  }
}

//Hidden on large style
.hidden-on-large {
  @include responsive-visibility();
  &.hidden-on-xsmall {
    @media #{$extra-small-media} {
      @include responsive-invisibility();
    }
  }
  &.hidden-on-small {
    @media #{$small-screen-range} {
      @include responsive-invisibility();
    }
  }
  &.hidden-on-medium {
    @media #{$medium-screen-range} {
      @include responsive-invisibility();
    }
  }
  @media #{$large-screen-range} {
    @include responsive-invisibility();
  }
}

//Portrait media styling
@media #{$portrait-media} {
  .show-on-portrait,
  .hide-on-landscape
  {
    @include responsive-visibility();
  }
  .hide-on-portrait,
  .show-on-landscape
  {
    @include responsive-invisibility();
  }
}

//Landscape media styling
@media #{$landscape-media} {
  .show-on-landscape,
  .hide-on-portrait
  {
    @include responsive-visibility();
  }
  .hide-on-landscape,
  .show-on-portrait
  {
    @include responsive-invisibility();
  }
}