@charset "UTF-8";
//////////////////////////////////////////////////////////////////////////////////
//
// Element queries for _lightbox.scss, based on: https://github.com/Snugug/eq.js
//
//////////////////////////////////////////////////////////////////////////////////

@import "../variables";
@import "../functions";

.mdlext-lightboard {

  @include eq-pts((
    lightboard_medium_small: strip-unit($mdlext-lightboard-medium-small-breakpoint),
    lightboard_medium: strip-unit($mdlext-lightboard-medium-breakpoint),
    lightboard_medium_large: strip-unit($mdlext-lightboard-medium-large-breakpoint),
    lightboard_large: strip-unit($mdlext-lightboard-large-breakpoint)
  ));

  ////// small - meduim-small //////
  @include eq('lightboard_medium_small') {
    padding: calc((#{$mdlext-lightboard-medium-small-margin} - #{$mdlext-lightboard-medium-small-gutter}) / 2);

    .mdlext-lightboard__slide {
      margin: calc(#{$mdlext-lightboard-medium-small-gutter} / 2);
      width: calc(1 / #{$mdlext-lightboard-medium-small-columns} * 100% - #{$mdlext-lightboard-medium-small-gutter});

      .mdlext-lightboard__slide__frame figure {
        margin: $mdlext-lightboard-medium-small-frame-width;
      }
    }
    &.mdlext-lightboard--no-spacing {
      padding: 0;

      .mdlext-lightboard__slide {
        margin: 0;
        width: calc(1 / #{$mdlext-lightboard-medium-small-columns} * 100%);
      }
    }
  }

  ////// meduim-small - medium //////
  @include eq('lightboard_medium') {
    padding: calc((#{$mdlext-lightboard-medium-margin} - #{$mdlext-lightboard-medium-gutter}) / 2);

    .mdlext-lightboard__slide {
      margin: calc(#{$mdlext-lightboard-medium-gutter} / 2);
      width: calc(1 / #{$mdlext-lightboard-medium-columns} * 100% - #{$mdlext-lightboard-medium-gutter});

      .mdlext-lightboard__slide__frame figure {
        margin: $mdlext-lightboard-medium-frame-width;
      }
    }
    &.mdlext-lightboard--no-spacing {
      padding: 0;

      .mdlext-lightboard__slide {
        margin: 0;
        width: calc(1 / #{$mdlext-lightboard-medium-columns} * 100%);
      }
    }
  }

  ////// meduim - medium-large //////
  @include eq('lightboard_medium_large') {
    padding: calc((#{$mdlext-lightboard-medium-large-margin} - #{$mdlext-lightboard-medium-large-gutter}) / 2);

    .mdlext-lightboard__slide {
      margin: calc(#{$mdlext-lightboard-medium-large-gutter} / 2);
      width: calc(1 / #{$mdlext-lightboard-medium-large-columns} * 100% - #{$mdlext-lightboard-medium-large-gutter});

      .mdlext-lightboard__slide__frame figure {
        margin: $mdlext-lightboard-medium-large-frame-width;
      }
    }
    &.mdlext-lightboard--no-spacing {
      padding: 0;

      .mdlext-lightboard__slide {
        margin: 0;
        width: calc(1 / #{$mdlext-lightboard-medium-large-columns} * 100%);
      }
    }
  }

  ////// meduim-large - large //////
  @include eq('lightboard_large') {
    padding: calc((#{$mdlext-lightboard-large-margin} - #{$mdlext-lightboard-large-gutter}) / 2);

    .mdlext-lightboard__slide {
      margin: calc(#{$mdlext-lightboard-large-gutter} / 2);
      width: calc(1 / #{$mdlext-lightboard-large-columns} * 100% - #{$mdlext-lightboard-large-gutter});

      .mdlext-lightboard__slide__frame figure {
        margin: $mdlext-lightboard-large-frame-width;
      }
    }
    &.mdlext-lightboard--no-spacing {
      padding: 0;

      .mdlext-lightboard__slide {
        margin: 0;
        width: calc(1 / #{$mdlext-lightboard-large-columns} * 100%);
      }
    }
  }
}

@include eq-selectors;