:root {
    --icon-hover-scale: 110%;
  }
  
  /*common rules for mobile and desktop*/
  .button-panel {
    position: absolute;
    background-color: aliceblue;
    z-index:600;
  }
  
  /*common icon setting*/
  .icon {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  
    border-radius: 50%;
  }
  
  /*variation for desktop*/
  @media (min-width: 600px) {
    /*button panel on desktop*/
    .button-panel {
      left: 50%;
      height: fit-content;
      width: 35%;
      min-width: 550px;
      transform: translate(-50%, -150%);
  
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
  
      background-color: var(--transparent-bg);
    }
  
    .button-panel.standard{
      top: calc(80% - var(--layout-margin));
    }
  
    .button-panel.full{
      top: calc(100% - var(--layout-margin))
    }
  
    .icon {
      height: 80px;
      width: 80px;
    }
  
    .flip-camera {
      display: none;
    }
  
    /*the hover feature only available on mobile devices*/
    .icon:hover {
      transform: scale(var(--icon-hover-scale));
    }
  }
  
  /*variation for mobile*/
  @media (max-width: 600px) {
    .button-panel {
      left: calc(0% + var(--layout-margin));
      height: 50%;
      width: 14%;
  
      transform: translate(0%, -50%);
  
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
  
      background-color: var(--transparent-bg);
    }
  
    .button-panel.standard{
      top: 50%;
    }
  
    .button-panel.full{
      top: 50%;
    }
  
    .icon {
      height: 14vw;
      width: 14vw;
    }
  
    .screen-share {
      display: none;
    }
  }
  
  /*specific icon setting*/
  .link {
    background-image: url("../../assets/call/icons/svg/link.svg");
  }
  
  .mic {
    background-image: url("../../assets/call/icons/svg/mic.svg");
  }
  
  .video {
    background-image: url("../../assets/call/icons/svg/video_close.svg");
  }
  
  .chat {
    background-image: url("../../assets/call/icons/svg/chat.svg");
  }
  
  .screen-share {
    background-image: url("../../assets/call/icons/svg/screen.svg");
  }
  
  .leave {
    background-image: url("../../assets/call/icons/svg/leave_call.svg");
  }
  
  .flip-camera {
    background-image: url("../../assets/call/icons/svg/flip_camera.svg");
  }
  
  .full-screen {
    background-image: url("../../assets/call/icons/svg/full_screen.svg");
  }
  
  .standard-screen {
    background-image: url("../../assets/call/icons/svg/standard_screen.svg");
  }