.cobalt-layout-flexible,
.cobalt-layout-flexibleWithConstraint,
.cobalt-layout-fixed {
  @apply c-flex c-flex-col [min-height:1px];

  &.cobalt-layout--fullHeight {
    @apply c-h-full;
  }
}

.cobalt-layout-flexible.cobalt-layout--bottomPadding,
.cobalt-layout-flexibleWithConstraint.cobalt-layout--bottomPadding,
.cobalt-layout-fixed.cobalt-layout--bottomPadding {
  @apply c-pb-xl;
}

.cobalt-layout-flexible,
.cobalt-layout-flexibleWithConstraint {
  @apply c-w-full c-min-w-none;
}

.cobalt-layout-fixed {
  @apply c-grow-0 c-shrink-0;
}

.cobalt-layout-flexibleWithConstraint {
  @apply c-mx-auto;
}

@include class-with-responsive-variants(
  "cobalt-layout-flexibleWithConstraint--large",
  (
    "max-width": 1200px
  )
);

@include class-with-responsive-variants(
  "cobalt-layout-flexibleWithConstraint--medium",
  (
    "max-width": 840px
  )
);

@include class-with-responsive-variants(
  "cobalt-layout-flexibleWithConstraint--small",
  (
    "max-width": 540px
  )
);

@include class-with-responsive-variants(
  "cobalt-layout-fixed--280",
  (
    "width": 280px
  )
);

@include class-with-responsive-variants(
  "cobalt-layout-fixed--420",
  (
    "width": 420px
  )
);

@include class-with-responsive-variants(
  "cobalt-layout-fixed--600",
  (
    "width": 600px
  )
);