trillo.txt

-- fill property is used for color the svg


 <svg class="side-nav__icon">
      <use xlink:href="img/sprite.svg#icon-home"></use>
 </svg> 
-- by include sprite.svg we only use one http request


--in fill we can directly give current color --- fill:currentColor

transition-origin by this we can give place to start to transistion (botoom,center,top)

--cubic-bezier is used to adjust transition timming


--z index is only work if we specified the position


-----------------------------------------------------------------------------------------------------------

pseudo element for side nav

&__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background-color: var(--color-primary);
    transform: scaleY(0);
    transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
      background-color 0.1s;
  }
-- a small line shown before hover

---------------------------------------
.side-nav {
  font-size: 1.4rem;
  list-style: none;
  margin-top: 3.5rem;
  &__item {
    position: relative;
    &:not(:last-child) {
      margin-bottom: 0.5rem;
    }
  }
  &__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background-color: var(--color-primary);
    transform: scaleY(0);
    transition: transform 0.2s //tranform happen in .2s, width 0.4s// //width happen in .4s// cubic-bezier(1, 0, 0, 1) 0.2s,
      background-color 0.1s;
  }
  &__item:hover::before,
  &__item--active::before {
    transform: scaleY(1); //take all the space in y direction 
    width: 100%;
  }
  &__item--active::before {
    background-color: var(--color-primary-light);
  }
  &__link:link,
  &__link:visited {
    color: var(--color-grey-light-1);
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding: 1.5rem 3rem;
    position: relative;
    z-index: 10;

    display: flex;
    align-items: center;
  }
  &__icon {
    width: 1.7rem;
    height: 1.7rem;
    margin-right: 2rem;
    // fill: var(--color-grey-light-1);
    fill: currentColor;
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////////
.btn {
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
  border-radius: 100px;
  border: none;
  background-image: linear-gradient(
    to right,
    var(--color-primary-light),
    var(--color-primary-dark)
  );
  color: #fff;
  position: relative;
  overflow: hidden;

  & > * {
    display: inline-block;
    transition: all 0.2s;
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
  &__visible {
    padding: 2rem 7.5rem;
  }
  &__invisible {
    position: absolute;
    padding: 2rem 0rem;
    left: 0;
    top: -100%;
  }
  &:hover {
    background-image: linear-gradient(
      to left,
      var(--color-primary-light),
      var(--color-primary-dark)
    );
  }
  &:hover &__visible {
    transform: translateY(100%);
  }
  &:hover &__invisible {
    top: 0;
  }
  &:focus {
    outline: none;
    animation: pulsate 1s infinite;
  }
}



////////////////////
--in css media query we cannot set css varible so define sass variable var>>$