//light green:#84DE02 orange:FF7E00

//declare colors
$iconsHoverBackcolor: #545252;
$iconsHoverTooltipBackcolor:#FF7E00;

//declare CSS grid structure
div#actionbar{
    display:grid;
    grid-template-rows: repeat(10, 1fr);
    grid-template-columns: auto;
    color:white;
    height:100%;
    text-align: center;
    font-size:small;
}

// icon 1
div.settingIcon{
  grid-area:1/1/1/1;
  background-image:url('../../assets/Group12.svg');
}

// icon 2
div.goalIcon{
    grid-area:2/1/2/1;
    background-image:url('../../assets/Group8.svg');
}

// // icon 2
// div.formIcon{
//     grid-area:2/1/2/1;
//     background-image:url('../../assets/Group6.svg');
//  }

// // icon 3
// div.reportIcon{
//     grid-area:3/1/3/1;
//     background-image:url('../../assets/Group7.svg');
//  }



//Icon background properties common settings
div.imgpos{
    background-repeat: no-repeat;
    background-position: center;
    background-size:60% 75%;    //initial, during resize
    cursor:pointer;
}

//Icon hover properties common settings
div.icon:hover{
    background-color: $iconsHoverBackcolor;
}

//Tooltiptext class linked to Icon hover
div.icon:hover .tooltiptext{
    background-color: $iconsHoverTooltipBackcolor;
    visibility:visible;

    // actual animation is reapplied everytime during hover to trigger animation reflow
    animation-name: tooltipAnimation;
    animation-duration: 0.5s;
}

/* Tooltip container */
// .tooltip {
//     position: relative;
//     display: inline-block;
//     border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
//   }

/* Tooltip text */
.tooltiptext {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    margin-top:0.15em; //adjust tooltip alignment according to need
    margin-left:-10vw;  //adjust tooltip alignment according to need
    visibility: hidden;
    width: 8vw;
    //background-color: black;
    color: #fff;
    text-align: center;
    font-size:0.85vw;
    padding: 0.3vw 0;
    border-radius: 0.3vw;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;

    /* 2nd tooltip dummy animation used as a trick
       to trigger actual animation reflow on hover everytime  */
    animation:tooltipAnimationReflowTrick;
}

@keyframes tooltipAnimation {
    0% {margin-left:-12vw; }
    100% {margin-left:-10vw; }
}

@keyframes tooltipAnimationReflowTrick {
  to {width: auto;}
}

//for arrow icon on tooltip
.tooltiptext::after {
    content: " ";
    position: absolute;
    top: 43%; /* At the right of the tooltip */
    left: 100%;
    margin-left: 0;
    border-width: 0.3vw;
    border-style: solid;
    border-color: transparent transparent transparent $iconsHoverTooltipBackcolor;
}

//   /* Show the tooltip text when you mouse over the tooltip container */
//   .tooltip:hover .tooltiptext {
//     visibility: visible;
//   }