@use 'mixins/mixins'as *;

#{getClassName((container))} {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
}

#{getClassName((container))}.is-vertical {
  flex-direction: column
}

#{getClassName((header))} {
  padding: #{getValName((header, padding))};
  box-sizing: border-box;
  flex-shrink: 0;
  height: #{getValName((header, height))};
}

#{getClassName((footer))} {
  padding: #{getValName((footer, padding))};
  box-sizing: border-box;
  flex-shrink: 0;
  height: #{getValName((footer, height))};
}

#{getClassName((main))}  {
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: #{getValName((main, padding))};
}
#{getClassName((aside))}  {
  overflow: auto;
  box-sizing: border-box;
  width: #{getValName((aside, width))};
  min-width: #{getValName((aside, width))};
}