How to declare a container query on current selector?

@container (max-width: 700px) {The selector you want to insert current-selectorThe element you want to style { ... } }

Option 1

SASS

+component('.btn')
  +register
    +responsive('@container modal-window (max-width: 360px)')
    +element('.icon')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey
    
    +responsive('@container modal-window (max-width: 360px)')
      background-color: red

CSS

.btn {
  display: inline-flex;
}

.btn .icon {
  background-color: grey;
}

@container modal-window (max-width: 360px) { 
  .btn .icon {
    background-color: red;
  }
}

More info: +responsive, +element, +register, +component, separator +___

Option 2 - better with alias

SASS

+component('.btn')
  +register
    +variant('.primary')
    +responsive('{modal<md}', '@container modal-window (max-width: 720px)')
    +element('.icon')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey
    
    +variant('.primary')
      +default
        background-color: orange

      +responsive('{modal<md}')
        background-color: red

CSS

.btn {
  display: inline-flex;
}

.btn .icon {
  background-color: grey;
}

.btn.primary .icon {
  background-color: orange;
}

@container modal-window (max-width: 720px) { 
  .btn.primary .icon {
    background-color: red;
  }
}

More info: +responsive, +variant, +element, +register, +component, separator +___

Option 3 - event better with global responsive

SASS

/* File: _common.sass */

// Register all common media and container queries here
+global-responsive('{modal<lg}', '@container modal-window (max-width: 1024px)')


// ________________________________________

/* File: btn.sass */

@import "common"

+component('.btn')
  +register
    +variant('.primary')
    +responsive('{modal<lg}') // just the alias is enough here
    +element('.icon')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey
    
    +variant('.primary')
      +default
        background-color: orange

      +responsive('{modal<lg}')
        background-color: red

CSS

.btn {
  display: inline-flex;
}

.btn .icon {
  background-color: grey;
}

.btn.primary .icon {
  background-color: orange;
}

@container modal-window (max-width: 1024px) { 
  .btn.primary .icon {
    background-color: red;
  }
}

More info: +responsive, +global-responsive, +variant, +default, +element, +register, +component, separator +___