Button close menu scss

button menu close x

//<button class="btn-mobile-menu" type="button" role="button" aria-label="Alternar Navegação">
//    <span class="lines"></span>
//</button>
$btn-mobile-size : 2rem;
$btn-mobile-color: #fff;
@mixin line {
  display: inline-block;
  width: $btn-mobile-size;
  height: $btn-mobile-size/7;
  background: $btn-mobile-color;
  border-radius: $btn-mobile-size/14;
  @include transition(all $base-transition);
}

.btn-mobile-menu {
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    @include transform(translateY(-50%));
    @include min-screen($breakpoint-lg-min) {
        display: none;
    }
background:transparent;
border:none;
  display: inline-block;
  padding: $btn-mobile-size/2 $btn-mobile-size/4;
  @include transition(all $base-transition);
  cursor: pointer;
  user-select: none;
  border-radius: $btn-mobile-size/7;

  &:hover {
    opacity: 1;
  }

  &:active {
    transition: 0;
    background: rgba(0,0,0,.1);
  }
  &:focus {
    outline:none;
  }
}

.lines {

  //create middle line
  @include line;
  position: relative;

  /*create the upper and lower lines as pseudo-elements of the middle line*/
  &:before, &:after {

   @include line;
    position: absolute;
      left:0;
    content: '';
    transform-origin: $btn-mobile-size/14 center;
  }
  &:before { top: $btn-mobile-size/3; }
  &:after { top: -$btn-mobile-size/3; }
}

.btn-mobile-menu.is-active .lines{

    /*hide the middle line*/
    background: transparent;

    /*overlay the lines by setting both their top values to 0*/
    &:before, &:after{
      transform-origin: 50% 50%;
      top:0;
      width: $btn-mobile-size;
    }

    // rotate the lines to form the x shape
    &:before{
      transform: rotate3d(0,0,1,45deg);
    }
    &:after{
      transform: rotate3d(0,0,1,-45deg);
    }
}