// Links

.link {
	@include transition($transition-base);
}

[class*="link-underline-"] {
	padding-bottom: 8px;
    position: relative;

    &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        @include border-radius($border-radius-pill);
        @include transition($transition-cubic-bezier);
    }

    &:hover {
        &:after {
            width: calc(100% + 8px);
            left: -4px;
        }
    }
}

@each $color, $value in $theme-colors {
	.link-underline-#{$color} {
		@include link-underline-variant($value);
	}
}