Попробуйте
pobem. Он позволяет прозрачно работать в контексте методологии и правильно воспринимает вложенность:
block(select) {
max-width: 100%;
vertical-align: bottom;
.elem(button) {
width: 100%;
vertical-align: top;
text-align: left;
}
block(button).elem(text) {
display: block;
padding-right: 2em;
&:empty:before {
content: '\00a0'
}
}
.elem(tick) {
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-image: url('../icon/_symbol/icon_symbol_chevron-down.svg');
transition: transform 0.1s ease-out;
width: 2em;
padding: .5em;
&:empty:after {
content: none
}
}
.mod(opened) .elem(tick) {
transform: rotate(-180deg)
}
.mod(width available) {
width: 100%
}
.mod(has-error) {
block(button) {
border-color: red
}
.elem(tick) {
display: none;
}
}
}