@line-color: #3cd9ec; /*control color*/
@line-height: 13px; /*height of the lines*/
@bottom-offset: 4px; /*offset from the bottom*/


.animation-function{-o-transition: all .4s ease;-moz-transition: all .4s ease;transition: all .4s ease;-webkit-transition: all .4s ease;}.header-nav-item--active{position: relative;&:before{content: '';position: absolute;height: @line-height !important;background-color: #75daff;right: 0;bottom: @bottom-offset;z-index: 0;right: -5px;left: -5px;width: ~"calc(100% + 8px)";}a{background: none !important;position: relative;z-index: 10;}}.header-nav-item{position: relative;&:before{content: '';position: absolute;height: @line-height;background-color: @line-color;right: 0;bottom: @bottom-offset;z-index: 0;right: -5px;left: -5px;width: 0px;.animation-function;}&:hover{&:before{width: ~"calc(100% + 8px)";}}a{background: none !important;position: relative;z-index: 10;}}