/**
 * AppBuckets UI
 *
 * _Container @ src/styles/grid/_container.scss
 *
 * Defined at 17 lug 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 * Container is a fixed max width div, used to
 * contain Layout Elements
 */


/******
    Internal Used Mixin to Set Container Style
******/
@mixin container-size($width, $padding: $container-padding, $important: false) {
  $important-suffix: '';

  @if $important {
    $important-suffix: !important;
  }

  max-width: $width #{$important-suffix};
  flex-basis: $width #{$important-suffix};
  padding-left: $padding #{$important-suffix};
  padding-right: $padding #{$important-suffix};
}


/******
    Container Class Definition
    Container sizing could be explicit declared
    adding the 'size' class.
    Alternatively it will be auto sized using screen resolution
******/
.container {
  display: block;
  font-size: inherit;
  margin-left: auto !important;
  margin-right: auto !important;
  flex-grow: 0;
  flex-shrink: 1;

  &:not(.fluid) {
    @include container-size($container-width-on-phone);
  }

  // ----
  //  Auto Sized Container
  // ----
  &:not(.fluid):not(.phone) {
    @include on-screen('tablet') {
      @include container-size($container-width-on-tablet);
    }
  }

  &:not(.fluid):not(.phone):not(.tablet) {
    @include on-screen('desktop') {
      @include container-size($container-width-on-desktop);
    }
  }

  &:not(.fluid):not(.phone):not(.tablet):not(.desktop) {
    @include on-screen('large-desktop') {
      @include container-size($container-width-on-large-desktop);
    }
  }

  // ----
  //  Fluid Container are max width
  // ----
  &.fluid {
    width: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
    padding-left: $fluid-container-padding-on-phone;
    padding-right: $fluid-container-padding-on-phone;

    /// Set padding depending on Screen Size
    @include on-screen('tablet') {
      padding-left: $fluid-container-padding-on-tablet;
      padding-right: $fluid-container-padding-on-tablet;
    }

    @include on-screen('desktop') {
      padding-left: $fluid-container-padding-on-desktop;
      padding-right: $fluid-container-padding-on-desktop;
    }

    @include on-screen('large-desktop') {
      padding-left: $fluid-container-padding-on-large-desktop;
      padding-right: $fluid-container-padding-on-large-desktop;
    }
  }
}