@charset "UTF-8";
/* 
Custommerce sp. z o. o. @ 2022
*/
@use "sass:math";
/*
  Uwaga! Dla kontenera standardowego np. 1200px uzywamy:
    $rc-container: 1200px;
    $rc-container-full-width: 1200px;
*/
body {
  margin: 0 auto;
  background-color: azure;
}

.main-container {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  max-width: 800px;
  background-color: wheat;
  height: 150vh;
  margin: 0 auto;
  --multiplier: calc(800px - 100%);
}

.main-container .inner {
  height: 300px;
  width: 70%;
  background-color: red;
}

.main-container .inner .line {
  background-color: coral;
  height: 2rem;
  bottom: 0;
  position: absolute;
  width: var(--multiplier);
}

.main-container .inner p::after {
  content: "To jest mój normalny rozmiar";
  /* 
   @if map-has-key($breakpoints, $break) {
      @if to-number(str-slice($break, 2)) >= $rc-container and to-number(str-slice($break, 2)) < $rc-container-full-width {
        @media only screen and (min-width: 1000px) {
          @content;
        }
      } @else if to-number(str-slice($break, 2)) >= $rc-container{
        @media only screen and (min-width: 1000px) {
            @content;
          }
      } @else {
        @media only screen and (max-width: 1000px) {
            @content;
          }
      }
    } @else {
      @warn "Couldn't find a breakpoint named w1000.";
    }
  */
  /* 
   @if map-has-key($breakpoints, $break) {
      @if to-number(str-slice($break, 2)) >= $rc-container and to-number(str-slice($break, 2)) < $rc-container-full-width {
        @media only screen and (min-width: 900px) {
          @content;
        }
      } @else if to-number(str-slice($break, 2)) >= $rc-container{
        @media only screen and (min-width: 900px) {
            @content;
          }
      } @else {
        @media only screen and (max-width: 900px) {
            @content;
          }
      }
    } @else {
      @warn "Couldn't find a breakpoint named w900.";
    }
  */
  /* 
   @if map-has-key($breakpoints, $break) {
      @if to-number(str-slice($break, 2)) >= $rc-container and to-number(str-slice($break, 2)) < $rc-container-full-width {
        @media only screen and (min-width: 800px) {
          @content;
        }
      } @else if to-number(str-slice($break, 2)) >= $rc-container{
        @media only screen and (min-width: 800px) {
            @content;
          }
      } @else {
        @media only screen and (max-width: 800px) {
            @content;
          }
      }
    } @else {
      @warn "Couldn't find a breakpoint named w800.";
    }
  */
  /* 
   @if map-has-key($breakpoints, $break) {
      @if to-number(str-slice($break, 2)) >= $rc-container and to-number(str-slice($break, 2)) < $rc-container-full-width {
        @media only screen and (min-width: 700px) {
          @content;
        }
      } @else if to-number(str-slice($break, 2)) >= $rc-container{
        @media only screen and (min-width: 700px) {
            @content;
          }
      } @else {
        @media only screen and (max-width: 700px) {
            @content;
          }
      }
    } @else {
      @warn "Couldn't find a breakpoint named w700.";
    }
  */
  /* 
   @if map-has-key($breakpoints, $break) {
      @if to-number(str-slice($break, 2)) >= $rc-container and to-number(str-slice($break, 2)) < $rc-container-full-width {
        @media only screen and (min-width: 600px) {
          @content;
        }
      } @else if to-number(str-slice($break, 2)) >= $rc-container{
        @media only screen and (min-width: 600px) {
            @content;
          }
      } @else {
        @media only screen and (max-width: 600px) {
            @content;
          }
      }
    } @else {
      @warn "Couldn't find a breakpoint named w600.";
    }
  */
  /* 
   @if map-has-key($breakpoints, $break) {
      @if to-number(str-slice($break, 2)) >= $rc-container and to-number(str-slice($break, 2)) < $rc-container-full-width {
        @media only screen and (min-width: 500px) {
          @content;
        }
      } @else if to-number(str-slice($break, 2)) >= $rc-container{
        @media only screen and (min-width: 500px) {
            @content;
          }
      } @else {
        @media only screen and (max-width: 500px) {
            @content;
          }
      }
    } @else {
      @warn "Couldn't find a breakpoint named w500.";
    }
  */
}

@media only screen and (max-width: 1000px) {
  .main-container .inner p::after {
    background-color: yellow;
    content: "mniej niz 100px";
  }
}

@media only screen and (min-width: 1000px) {
  .main-container .inner p::after {
    background-color: green;
    content: "mniej niz 900";
  }
}

@media only screen and (max-width: 900px) {
  .main-container .inner p::after {
    background-color: green;
    content: "mniej niz 900";
  }
}

@media only screen and (min-width: 1000px) {
  .main-container .inner p::after {
    background-color: paleturquoise;
    content: "mniej niz 800";
  }
}

@media only screen and (max-width: 800px) {
  .main-container .inner p::after {
    background-color: paleturquoise;
    content: "mniej niz 800";
  }
}

@media only screen and (max-width: 700px) {
  .main-container .inner p::after {
    background-color: violet;
    content: "mniej niz 700";
  }
}

@media only screen and (max-width: 600px) {
  .main-container .inner p::after {
    background-color: brown;
    content: "mniej niz 600";
  }
}

@media only screen and (max-width: 500px) {
  .main-container .inner p::after {
    background-color: blue;
    content: "mniej niz 500";
  }
}

@media screen and (max-width: 1000px) {
  .main-container {
    max-width: 100%;
  }
}