/*
    according to its container .AppController(); these buttons are:
    - COL-FLEX on mobile;
    - ROW-FLEX on other resolution;
*/
.AppControllerButton{

  .ROW-FLEX();
  @media @onlyScreen and @smallmobile, @mobile {
    .COL-FLEX();
    line-height: @line-height-small;
  }


  .Icon{
    .Icon(@app-controller-icon-size);
  }
  @media @onlyScreen and @smallmobile, @mobile {
    .Icon {
      .Icon(@app-controller-icon-size-small-screen);
    }

    .label{
      font-size: 0.8em;
    }
  }


  @media @onlyScreen and @desktop {
    .Icon {
      .Icon(@app-controller-icon-size-large-screen);
    }
  }

  @media @onlyScreen and @wide {
    .Icon {
      .Icon(@app-controller-icon-size-extralarge-screen);
    }
  }

}

/*
  the active AppControllerButton has a different style and an arrow on its right
  this arrow will be hidden on mobile
*/
.AppControllerButton.active{

   background-color: rgba(0,0,0,0.35);

  .PADDER-CENTER::after {
    content: "";
    position: absolute;
    right: -27px;
    width: 30px;
    height: 30px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 40%;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.8);

    @media @onlyScreen and @smallmobile, @mobile {
      display: none;
    }
  }

}