@import url('../../variables.less');


/**********************************************************************************
To style the outermost wrapper element of anchor widget.
***********************************************************************************/
.app-anchor {
}


/**********************************************************************************
To style the caption text of anchor widget.
***********************************************************************************/
.app-anchor-text {
    color: @linkDefaultColor;
}


/**********************************************************************************
To style the badge of anchor widget.
***********************************************************************************/
.app-anchor-badge {
}


/**********************************************************************************
To style the icon of anchor widget.
***********************************************************************************/
.app-anchor-icon {
}


.app-anchor-icon.app-icon {
    color: @linkDefaultColor;
}


/**********************************************************************************
To style the skeleton of anchor widget.
***********************************************************************************/
.app-anchor-skeleton {
}


.link-primary.app-anchor-text {
    color: @linkPrimaryColor;
}


.link-primary.app-anchor-icon .app-icon {
    color: @linkPrimaryColor;
}


.link-primary.app-anchor-badge {
    background-color: fade(@linkPrimaryColor, 20%);
    color: @linkPrimaryColor;
}


.link-secondary.app-anchor-text {
    color: @linkSecondaryColor;
}


.link-secondary.app-anchor-icon .app-icon {
    color: @linkSecondaryColor;
}


.link-secondary.app-anchor-badge {
    background-color: fade(@linkSecondaryColor, 20%);
    color: @linkSecondaryColor;
}


.link-success.app-anchor-text {
    color: @linkSuccessColor;
}


.link-success.app-anchor-icon .app-icon {
    color: @linkSuccessColor;
}


.link-success.app-anchor-badge {
    background-color: fade(@linkSuccessColor, 20%);
    color: @linkSuccessColor;
}


.link-danger.app-anchor-text {
    color: @linkDangerColor;
}


.link-danger.app-anchor-icon .app-icon {
    color: @linkDangerColor;
}


.link-danger.app-anchor-badge {
    background-color: fade(@linkDangerColor, 20%);
    color: @linkDangerColor;
}


.link-warning.app-anchor-text {
    color: @linkWarningColor;
}


.link-warning.app-anchor-icon .app-icon {
    color: @linkWarningColor;
}


.link-warning.app-anchor-badge {
    background-color: fade(@linkWarningColor, 20%);
    color: @linkWarningColor;
}


.link-info.app-anchor-text {
    color: @linkInfoColor;
}


.link-info.app-anchor-icon .app-icon {
    color: @linkInfoColor;
}


.link-info.app-anchor-badge {
    background-color: fade(@linkInfoColor, 20%);
    color: @linkInfoColor;
}


.link-light.app-anchor-text {
    color: @linkLightColor;
}


.link-light.app-anchor-icon .app-icon {
    color: @linkLightColor;
}


.link-light.app-anchor-badge {
    background-color: fade(@linkLightColor, 20%);
    color: @linkLightColor;
}


.link-dark.app-anchor-text {
    color: @linkDarkColor;
}


.link-dark.app-anchor-icon .app-icon {
    color: @linkDarkColor;
}


.link-dark.app-anchor-badge {
    background-color: fade(@linkDarkColor, 20%);
    color: @linkDarkColor;
}


.link-primary.app-anchor-text {
}


.link-primary.app-anchor-icon .app-icon {
}


.link-primary.app-anchor-badge {
}


.link-secondary.app-anchor-text {
}


.link-secondary.app-anchor-icon .app-icon {
}


.link-secondary.app-anchor-badge {
}


.link-tertiary.app-anchor-text {
}


.link-tertiary.app-anchor-icon .app-icon {
}


.link-tertiary.app-anchor-badge {
}


.link-success.app-anchor-text {
}


.link-success.app-anchor-icon .app-icon {
}


.link-success.app-anchor-badge {
}


.link-danger.app-anchor-text {
}


.link-danger.app-anchor-icon .app-icon {
}


.link-danger.app-anchor-badge {
}


.link-warning.app-anchor-text {
}


.link-warning.app-anchor-icon .app-icon {
}


.link-warning.app-anchor-badge {
}


.link-info.app-anchor-text {
}


.link-info.app-anchor-icon .app-icon {
}


.link-info.app-anchor-badge {
}

@import (optional) url('../../../wavemaker/design-tokens/basic/anchor.less');
@import (optional) url('../../../custom/components/basic/anchor.less');
@import (optional) url('../../../custom/os/components/basic/anchor.less');