/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}link {

    /* Save root element context for easy access if nesting is needed */

    $self: &;


    /* properties of current element  + media queries */
   	@include link();


    /* Pseudo Elements */

    &::before {
    }

    &::after {
    }

    /*
    Include elements that are linked to the current element but have to reside at the root level of the stylesheet
    (e.g: keyframes)
    */
    @at-root {
    }


    /* children - write selector in full in comments in order to facilitate search */

    // link__icon
    &__icon {

        // follows same logic as parent

		vertical-align: baseline;
		position: relative;
		text-decoration: none;
		
		&::before {

			font-size: 1em;

		}

	}


    /* modifiers */

    // link -altStyle
    &.-altStyle {

        // follows same logic as base element

    }

    /* random parent element */
    /*
    *
    *   Syntax : .randomParentElt & {}
    *
    */

    /* Pseudo Classes */

    &:hover {
		@media (hover: hover) {
			@include custom-prop-fallback("color","sys-color-text-secondary-vivid");
		}
    }

    &:focus {
    }

    &:active {
    }

    &:focus,
    &:active {
    }

}