@import '~@kaizen/design-tokens/sass/layout';

@mixin title-block-under-1645 {
  @container (max-width: 1644px) {
    @content;
  }
}

@mixin title-block-under-1440 {
  @container (max-width: 1439px) {
    @content;
  }
}

@mixin title-block-under-1366 {
  @container (max-width: 1365px) {
    @content;
  }
}

@mixin title-block-medium-and-small {
  @container (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
    @content;
  }
}

@mixin title-block-under-1024 {
  @container (max-width: 1023px) {
    @content;
  }
}

@mixin title-block-small {
  @container (max-width: calc(#{$layout-breakpoints-medium} - 1px)) {
    @content;
  }
}

@mixin title-block-xsmall {
  @container (max-width: 511px) {
    @content;
  }
}

@mixin title-block-min-media-1080 {
  @media (min-width: #{$layout-breakpoints-large}) {
    @content;
  }
}

@mixin title-block-min-container-1080 {
  @container (min-width: #{$layout-breakpoints-large}) {
    @content;
  }
}

@mixin title-block-media-mixed-width {
  // 1080
  @media (min-width: #{$layout-breakpoints-large}) and (max-width: 1095px) {
    // Note: There is a diff of 15px between the media and container query
    @container (min-width: 1065px) {
      @content;
    }
  }
}

// 576 is the specified breakpoint from design to wrap the primary actions
@mixin title-block-under-576 {
  @container (max-width: 576px) {
    @content;
  }
}