.phone_wrapper
  header
    .speaker
      .mic
    nav
      .tab.tab1.active
        .block
      .tab.tab2
        .block
      .indicator
  main
    .tab_reel
      .tab_panel1
        .card.card_large
          figure
          .desc
            .block
            .block
        .card.card_list
          figure
          .desc
            .block
            .block
        .card.card_list
          figure
          .desc
            .block
            .block

        .card.card_list
          figure
          .desc
            .block
            .block
            
      .tab_panel2
        .card.card_list
          figure
          .desc
            .block
            .block
        .card.card_list
          figure
          .desc
            .block
            .block

        .card.card_list
          figure
          .desc
            .block
            .block
        .card.card_large
            figure
            .desc
              .block
              .block
    

@mixin size($w, $h)
  width: $w
  height: $h

@mixin flex($dis, $x, $y, $dir)
  display: $dis
  justify-content: $x
  align-items: $y
  flex-direction: $dir

$base: #282931

*
  box-sizing: border-box

body, html
  +size(100%, 100vh)
  display: flex
  align-items: center
  justify-content: center
  background: linear-gradient(to bottom, cornflowerblue, rgba(dodgerblue, 0.2))

.phone_wrapper
  +size(320px, 470px)
  +flex(flex, null, null, column)
  background: white
  box-shadow: 0px 40px 40px -20px rgba(black, 0.25)
  border-radius: 10px
  overflow: hidden
  header
    background: lighten(cornflowerblue, 20%)
    +size(100%, 75px)
    border-radius: 10px 10px 0 0
    +flex(flex, null, null, column)
    .speaker
      +size(100%, 40%)
      +flex(flex, center, center, null)
      
    .mic
      +size(15%, 7px)
      background: lighten(cornflowerblue, 10%)
      border-radius: 120px
    
    nav
      +size(100%, 60%)
      +flex(flex, null, null, null)
      position: relative
      .tab
        +size(50%, 100%)
        +flex(flex, center, center, null)
      .indicator
        +size(50%, 4px)
        position: absolute
        bottom: 0
        background: lighten(cornflowerblue, 7%)
        transition: 0.3s ease

    .block
      +size(85%, 40%)
      border-radius: 4px
      background: lighten(cornflowerblue, 10%)
      cursor: pointer
  
  
  
  main
    flex: 1
    +size(200%, 100%)
    .tab_reel
      +size(100%, null)
      +flex(flex, space-between, null, null)
      transition: 0.5s cubic-bezier(.18,1.14,.5,1.18)
      .tab_panel1, .tab_panel2
        +size(50%, null)
        padding: 10px
    .card
      +size(100%, auto)
      padding: 10px
      margin-bottom: 0.7rem
      border-radius: 6px
      background: white
      box-shadow: 0px 5px 15px rgba(cornflowerblue, 0.3)
  
    .card_large
      figure
        +size(100%, 100px)
        margin: 0
        background: lighten(cornflowerblue, 20%)
      .desc
        padding-left: 0px
    
    .card_list
      +flex(flex, null, center, row)
      figure
        +size(40px, 40px)
        border-radius: 120px
        background: lighten(cornflowerblue, 20%)
        margin: 0
      .desc
        flex: 1
      
    .desc
      +size(100%, null)
      padding: 10px
      .block
        +size(40%, 7px)
        margin-bottom: 5px
        background: lighten(cornflowerblue, 10%)
        &:nth-child(2)
          width: 35%
          margin-bottom: 0px
    

.tab1
  &.active
    ~ .indicator
        left: 0

.tab2
  &.active
    ~ .indicator
        left: 50%
    

const reel = document.querySelector('.tab_reel');
const tab1 = document.querySelector('.tab1');
const tab2 = document.querySelector('.tab2');
const panel1 = document.querySelector('.tab_panel1');
const panel2 = document.querySelector('.tab_panel2');

function slideLeft(e) {
  tab2.classList.remove('active');
  this.classList.add('active');
  reel.style.transform = "translateX(0%)"
}

function slideRight(e) {
  tab1.classList.remove('active');
  this.classList.add('active');
  reel.style.transform = "translateX(-50%)"
}

tab1.addEventListener('click', slideLeft);
tab2.addEventListener('click', slideRight);