/* @stylesheet

# border-underline

usage:

```html
<a href="/" class="border-underline"><u class="u">Text</u></a>
```

 */

@border-underline: border-underline;

.border-underline-settings() {
    //colors
    @link:          #0877db;
    @visited:       #9108db;
    @hover:         #2b9aff;
    @visitedhover:  #bc4df8;
    @active:        #bc4df8;
    @shift:         .2em;
    @bd-style:      1px solid;
    @transition:    .3s ease-out;

    //modifiers
    @bd-style-dashed: 1px dashed;

    //calculations
    @bdc-link:          lighten(@link, 30%);
    @bdc-visited:       lighten(@visited, 40%);
    @bdc-hover:         lighten(@hover, 30%);
    @bdc-visitedhover:  lighten(@visitedhover, 30%);
    @bdc-active:        lighten(@active, 30%);
}

.@{border-underline} {
    position: relative;
    top: -@shift;
    text-decoration: none;
    border-bottom: @bd-style;
    transition:
        color             @transition,
        background-color  @transition,
        border-color      @transition,
        box-shadow        @transition;

    &:link          { border-color: @bdc-link; }
    &:visited       { border-color: @bdc-visited; }
    &:hover         { border-color: @bdc-hover; }
    &:visited:hover { border-color: @bdc-visitedhover; }
    &:active        { border-color: @bdc-active; }

    &:link,
    &:link *,
    &:visited,
    &:visited *,
    &:active,
    &:active * {
        transition:
            color             @transition,
            background-color  @transition,
            border-color      @transition,
            box-shadow        @transition;
    }

    &:hover,
    &:hover *,
    &:visited:hover,
    &:visited:hover * {
        transition:
            color             0s,
            background-color  0s,
            border-color      0s,
            box-shadow        0s;
    }

    .u {
        text-decoration: none;
        position: relative;
        top: @shift;
    }

    .border-underline-settings();
}

@border-underline-dashed: {
    .@{border-underline}-dashed {
        border-bottom: @bd-style-dashed;
    }

    .border-underline-settings();
};
