// Comfort Use
$it-mar: $container-column-margin;
$it-pad: $container-column-padding;
$sep: $condition-separator;

@if $css-variable-enabled {
  $it-mar: var(--container-column-margin);
  $it-pad: var(--container-column-padding);
  $container-margin: var(--container-margin);
  $container-padding: var(--container-padding);
}

// Sizes
@mixin sizes($suffix: '') {
  &.#{$prefix}size-1-2#{$suffix}, &.#{$prefix}size-half#{$suffix}  {
    flex: none;
    width: 50% !important;
  }

  // Three Parts
  @for $i from 1 through 2 {
    &.#{$prefix}size-#{$i}-3#{$suffix} {
      flex: none;
      width: percentage($i/3) !important;
    }
  }

  // Four Parts
  @for $i from 1 through 3 {
    &.#{$prefix}size-#{$i}-4#{$suffix} {
      flex: none;
      width: percentage($i/4) !important;
    }
  }

  // Five Parts
  @for $i from 1 through 4 {
    &.#{$prefix}size-#{$i}-5#{$suffix} {
      flex: none;
      width: percentage($i/5) !important;
    }
  }

  // 12 Parts
  @for $i from 1 through 11 {
    &.#{$prefix}size-#{$i}-12#{$suffix} {
      flex: none;
      width: percentage($i/12) !important;
    }
  }
}

.#{$prefix}container {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  overflow: visible;
  margin: $container-margin;
  padding: $container-padding;

  &.#{$prefix}v-centered {
    align-items: center;
  }

  &.#{$prefix}h-centered {
    justify-content: center;
  }

  &.#{$prefix}f-centered {
    align-items: center;
    justify-content: center;
  }

  &.#{$prefix}column {

    $not-selector: getClassList($breakpoint-names, ':not(.#{$prefix}active#{$sep}name)', 'name', '', '', '');

    &:not(.#{$prefix}custom)#{$not-selector} {
      @include medium {
        flex-wrap: nowrap;
      }
    }

    $common-selector: getClassList($breakpoint-names, '.#{$prefix}active#{$sep}name', 'name', '&', '', ', &');

    #{$common-selector} {
      > .#{$prefix}column {
        margin: 0 0 $it-mar 0;
      }
    }

    &.#{$prefix}custom {
      &:not(.#{$prefix}active) {
        > .#{$prefix}column {
          margin: 0 0 $it-mar 0;
        }
      }

      &.#{$prefix}active {
        flex-wrap: nowrap;

        > .#{$prefix}column {
          margin: 0 $it-mar 0 0;

          @include sizes;
        }
      }
    }

    &.#{$prefix}active#{$sep}all {
      @include small {
        flex-wrap: nowrap;

        > .#{$prefix}column {
          margin: 0 $it-mar 0 0;

          @include sizes;
        }
      }
    }

    @include each-breakpoint('&.#{$prefix}active#{$sep}name', 'name') {
      flex-wrap: nowrap;

      > .#{$prefix}column {
        margin: 0 $it-mar 0 0;

        @include sizes;
      }
    }
  }

  .#{$prefix}column {
    margin: 0 $it-mar 0 0;
    padding: $it-pad;
    width: 100%;

    &.#{$prefix}default {
      flex: none;
      width: auto;
    }

    @include each-breakpoint('&.#{$prefix}default#{$sep}name', 'name') {
      flex: none;
      width: auto;
    }

    @include small {
      margin: 0 0 $it-mar 0;
    }

    &:last-child {
      margin: 0 !important;
    }

    &.#{$prefix}full {
      flex: none;
      width: 100%;
    }

    &.#{$prefix}container {
      padding: 0;
    }

    @include medium {
      @include sizes;
    }

    @each $name, $min-width, $max-width in $breakpoints {
      @if $name {
        @if ($min-width not null) and ($max-width == null) {
          @media screen and (min-width: $min-width) {
            @include sizes('#{$sep}#{$name}');
          }
        } @else if ($min-width == null) and ($max-width not null) {
          @media screen and (max-width: $max-width) {
            @include sizes('#{$sep}#{$name}');
          }
        } @else if ($min-width not null) and ($max-width not null) {
          @media screen and (min-width: $min-width) and (max-width: $max-width) {
            @include sizes('#{$sep}#{$name}');
          }
        }
      }
    }
  }
}

// Grouping
.#{$prefix}el-group {
  display: inline-flex;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 0;
  margin-right: 8px;
  margin-bottom: 8px;
  vertical-align: bottom;

  > *, > .#{$prefix}dropdown > .#{$prefix}btn {
    margin: 0 !important;
  }

  > .#{$prefix}dropdown > .#{$prefix}btn {
    height: 100%;
  }

  &:not(.#{$prefix}vertical) {
    > :first-child, > label:first-child > .#{$prefix}btn, > .#{$prefix}dropdown:first-child > .#{$prefix}btn {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    > *:not(:first-child):not(:last-child), label:not(:first-child):not(:last-child) > .#{$prefix}btn {
      border-radius: 0 0 0 0 !important;
    }


    > *:not(:first-child):not(:last-child).#{$prefix}btn {
      border-left-width: 0 !important;
    }

    > :last-child, > label:last-child > .#{$prefix}btn, > .#{$prefix}dropdown:last-child > .#{$prefix}btn {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    > :last-child.#{$prefix}btn, > .#{$prefix}dropdown:last-child > .#{$prefix}btn {
      border-left-width: 0 !important;
    }
  }

  &.#{$prefix}vertical {
    display: inline-flex;
    flex-direction: column;

    > :first-child, > label:first-child > .#{$prefix}btn {
      border-bottom-right-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    > :first-child.#{$prefix}button {
      border-bottom-width: 0 !important;
    }

    > *:not(:first-child):not(:last-child), label:not(:first-child):not(:last-child) > .#{$prefix}btn {
      border-radius: 0 0 0 0 !important;
    }

    > *:not(:first-child):not(:last-child).#{$prefix}btn {
      border-bottom-width: 0 !important;
    }

    > :last-child, > label:last-child > .#{$prefix}btn {
      border-top-right-radius: 0 !important;
      border-top-left-radius: 0 !important;
    }

    > label {
      width: 100%;
      display: flex;

      > .#{$prefix}btn {
        width: 100%;
      }
    }
  }

  &.#{$prefix}fullwidth, &.#{$prefix}full-width {
    display: flex;
  }
}

// Snap Container
.#{$prefix}snap-container {
  display: flex;
  overflow: auto;
  
  &:not(.#{$prefix}vertical) {
    flex-direction: row;
    scroll-snap-type: x mandatory;
  }

  &.#{$prefix}vertical {
    flex-direction: column;
    scroll-snap-type: y mandatory;
  }

  #{getClassList($breakpoint-names, '&.#{$prefix}active#{$sep}name', 'name', '', '', ', ')} {
    scroll-snap-type: none;
  }

  @include each-breakpoint('&.#{$prefix}active#{$condition-separator}name', 'name') {
    &:not(.#{$prefix}vertical) {
      scroll-snap-type: x mandatory;
    }

    &.#{$prefix}vertical {
      scroll-snap-type: y mandatory;
    }
  }

  &.#{$prefix}snap-start > .#{$prefix}snap-item {
    scroll-snap-align: start;
  }

  &.#{$prefix}snap-end > .#{$prefix}snap-item {
    scroll-snap-align: end;
  }

  > .#{$prefix}snap-item {
    scroll-snap-align: center;

    &.#{$prefix}snap-start {
      scroll-snap-align: start;
    }

    &.#{$prefix}snap-center {
      scroll-snap-align: center;
    }

    &.#{$prefix}snap-end {
      scroll-snap-align: end;
    }
  }
}