@import "~@cultureamp/kaizen-component-library/styles/layout";

$small: 300px;
$medium: 720px;
$large: 1080px;

$sidebarWidth: 240px;
$sidebarWithPadding: $sidebarWidth + (2 * $ca-layout-side-padding);
$contentPadding: 2 * $ca-layout-side-padding;

@mixin large-sidebar-and-content {
  @media (min-width: $large + $sidebarWithPadding + $contentPadding) {
    @content;
  }
}

@mixin large-content-only {
  @media (min-width: $large + $contentPadding) {
    @content;
  }
}

@mixin medium {
  @media (min-width: $medium + $contentPadding) {
    @content;
  }
}

@mixin small {
  @media (max-width: $medium + $contentPadding - 1px) {
    @content;
  }
}