.sm-link{
    --uismLinkDisplay: var(--smLinkDisplay, inline-flex);   
    --uismLinkTextColor: var(--smLinkTextColor);
    --uismLinkTextColorHover: var(--smLinkTextColorHover);  
    
    display: var(--uismLinkDisplay);
    color: var(--uismLinkTextColor);
    position: relative;
    overflow: hidden;
}



/* sm-link_padding-all */ 

.sm-link_padding-all{
    --uismLinkLineWeight: var(--smLinkLineWeight, 2px);
    --uismLinkLineColor: var(--smLinkLineColor, #000);
    --uismLinkPadding: var(--smLinkPadding, 5px);
    
 
}




.sm-link_padding-all::before,
.sm-link_padding-all::after,
.sm-link_padding-all .sm-link__label::before,
.sm-link_padding-all .sm-link__label::after{
  content: "";     
    background-color: var(--uismLinkLineColor);
  position: absolute; 
    opacity: 0;
    
    will-change: transform, opacity;
    transition-property: transform, opacity;
}

.sm-link_padding-all:hover::before,
.sm-link_padding-all:hover::after,
.sm-link_padding-all:hover .sm-link__label::before,
.sm-link_padding-all:hover .sm-link__label::after{
    opacity: 1;
}

/* sm-link_padding-bottom */ 

.sm-link_padding-bottom{
    --uismLinkLineWeight: var(--smLinkLineWeight, 2px);
    --uismLinkLineColor: var(--smLinkLineColor, #000);  
    
    padding-bottom: var(--uismLinkLineWeight);  
    position: relative;
}

.sm-link_padding-bottom::after{
  content: "";
  width: 100%;
  height: var(--uismLinkLineWeight);
    background-color: var(--uismLinkLineColor);
    
  position: absolute;
  left: 0;
  bottom: 0;
}

/* sm-link_bg */ 

.sm-link_bg {
    --uismLinkLineColor: var(--smLinkLineColor, #000);  
    --uismLinkTextColorHover: var(--smLinkTextColorHover, #fff);    
    --uismLinkPadding: var(--smLinkPadding, 0px);
    
    padding: var(--uismLinkPadding);
    transition: color .3s ease-out;
}

.sm-link_bg::before, 
.sm-link_bg::after{
  content: "";
    background-color: var(--uismLinkLineColor); 
  opacity: 0;
  position: absolute;
    
    transition: transform .2s ease-out, opacity .2s ease-out .03s;
}


/* effect 6 */

.sm-link6::before,
.sm-link6::after, 
.sm-link6 .sm-link__label::before,
.sm-link6 .sm-link__label::after{
  transition-duration: .2s;
  transition-timing-function: ease-out;
}

.sm-link6::before, 
.sm-link6::after{
  width: 100%;
  height: var(--uismLinkLineWeight);
  left: 0;
}

.sm-link6 .sm-link__label::before,
.sm-link6 .sm-link__label::after{
  width: var(--uismLinkLineWeight);
  height: 100%;
  top: 0;
}

.sm-link6::before{
  top: 0;
  transform: translate3d(-105%, 0, 0);
}

.sm-link6::after{
  bottom: 0;
  transform: translate3d(105%, 0, 0);
}

.sm-link6 .sm-link__label::before{
  left: 0;
  transform: translate3d(0, 105%, 0);
}

.sm-link6 .sm-link__label::after{
  right: 0;
  transform: translate3d(0, -105%, 0);
}

.sm-link6:hover::before,
.sm-link6:hover::after,
.sm-link6:hover .sm-link__label::before,
.sm-link6:hover .sm-link__label::after{
  transform: translate3d(0, 0, 0);
}

.sm-link6:hover::before{
  transition-delay: 0s;
}

.sm-link6 .sm-link__label::after,
.sm-link6:hover::after{
  transition-delay: .25s;
}

.sm-link6::after,
.sm-link6:hover .sm-link__label::after{
  transition-delay: .15s;
}

.sm-link6::before,
.sm-link6:hover .sm-link__label::before{
  transition-delay: .35s;
}





/*
SETTINGS
*/

.sm-link{
    --smLinkPadding: 10px 15px;
    --smLinkLineWeight: 1px;
    --smLinkLineColor: #369fd2;
    --smLinkTextColor: #369fd2;
    --smLinkTextColorHover: #369fd2;
}