// MAIN (monima in web)

// RESPONSIVE LAYOUT deluje tako, da vse classe definiramo za desktop, potem pa jih prilagodimo za mobile oz. če je potrebno tudi za tablet
// to ne gre narediti v pure css
// v PhpStormu uporabi Live template, npr.: mobile, ki se spremeni v: @media #{$mobile} {  }

// širina sidebara
$sidebar_width: 500px;
$tablet_width: 768px;
$desktop_width: 1240px;
$width_for_sidebar: 1366px; // sidebar za urejanje se pojavi, če imamo širino vsaj toliko; 1366px je pogosta širina zaslona na prenosnikih

$mobile: "only screen and (max-width: #{$tablet_width - 1px})"; // vse z manjšo širino štejemo kot mobile
$mobile_beside_sidebar: "only screen and (max-width: #{$tablet_width - 1px + $sidebar_width})"; // $mobile_beside_sidebar ne more obstajati, ker se sidebar pojavi šele pri 1366px, 1247px pa je manj kot to; ampak vseeno definiramo zaradi preglednosti kode

$tablet: "only screen and (min-width: #{$tablet_width}) and (max-width: #{$desktop_width - 1px})"; // vse z vmesno širino štejemo kot tablet
$tablet_beside_sidebar: "only screen and (min-width: #{$tablet_width + $sidebar_width}) and (max-width: #{$desktop_width - 1px + $sidebar_width})";

$mobile_and_tablet: "only screen and (max-width: #{$desktop_width - 1px})";
$mobile_and_tablet_beside_sidebar: "only screen and (max-width: #{$desktop_width - 1px + $sidebar_width})";

$desktop_and_tablet: "only screen and (min-width: #{$tablet_width})";
$desktop_and_tablet_beside_sidebar: "only screen and (min-width: #{$tablet_width + $sidebar_width})";

$desktop: "only screen and (min-width: #{$desktop_width})";
$desktop_beside_sidebar: "only screen and (min-width: #{$desktop_width + $sidebar_width})";

$sidebar: "only screen and (min-width: #{$width_for_sidebar})";
$no_sidebar: "only screen and (max-width: #{$width_for_sidebar - 1px})";

$transition: 600ms cubic-bezier(0.77, 0, 0.175, 1); // duration and function