// These selectors will work only starting from 2.1.1 #{$iframe} { transition: opacity .5s ease-in-out; } body[#{$offer-state-attribute}~="offer"], body[data-talkable-offer-state="offer"] { overflow: hidden; #{$iframe} { background: none !important; display: block; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 2147483645; } } body[#{$offer-state-attribute}="trigger"], body[data-talkable-offer-state="trigger"] { overflow: auto; #{$iframe} { display: block; position: fixed; right: 10px; bottom: 10px; background: transparent; z-index: 2147483645; } } @media only screen and (max-device-width : 1024px) { body[#{$offer-state-attribute}~="offer"], body[data-talkable-offer-state="offer"] { overflow: auto; #{$iframe} { position: absolute !important; } } body[#{$offer-state-attribute}="trigger"], body[data-talkable-offer-state="trigger"] { #{$iframe} { position: fixed !important; } } }