@import 'commons';

.m-link {
    --m-link--color-visited: #{$m-color-interactive-darker};
    --m-link--color-active: #{$m-color-interactive-dark};
    --m-link--color: #{$m-color-interactive};
    --m-link--color-hover: #{$m-color-interactive-light};

    transition: color $m-transition-duration ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: $m-font-weight-semi-bold;
    color: var(--m-link--color);
    text-decoration: none;
    outline-color: $m-color-interactive;

    &.m--has-icon {
        display: inline-flex;
        align-items: center;
    }

    &.m--has-right-icon.m--has-content {
        flex-direction: row-reverse;

        .m-link__icon {
            margin-left: $m-space-xs;
        }
    }

    &.m--has-bullet-point {
        align-items: baseline;
    }

    &.m--has-left-icon.m--has-content {
        .m-link__icon {
            margin-right: $m-space-xs;
        }
    }

    &:not(.m--is-disabled) {
        cursor: pointer;

        &:not(.m--no-underline) {

            &:hover,
            &:focus {
                .m-link__text {
                    text-decoration: underline;
                }
            }
        }

        &:hover {
            color: var(--m-link--color-hover);
        }

        &:active,
        &:focus:not(:hover) {
            color: var(--m-link--color-active);
        }

        &:not(.m--is-unvisited):not(:hover):not(:focus):visited {
            color: var(--m-link--color-visited);
        }
    }

    &.m--is-disabled {
        color: $m-color-disabled;
        cursor: default;
    }

    &.m--is-skin-text {
        --m-link--color-visited: #{$m-color-text};
        --m-link--color-active: #{$m-color-black};
        --m-link--color: #{$m-color-text};
        --m-link--color-hover: #{$m-color-grey-dark};
    }

    &.m--is-skin-light {
        --m-link--color-visited: #{$m-color-white};
        --m-link--color-active: #{$m-color-grey-light};
        --m-link--color: #{$m-color-white};
        --m-link--color-hover: #{$m-color-grey-lighter};
    }

    &__text {
        position: relative;
        vertical-align: middle;
    }

    &__icon {
        display: inline-flex;
        flex-shrink: 0;
        vertical-align: middle;

        &.m--has-large-stroke {
            stroke-width: 2px;
        }
    }

    &__hidden {
        @include m-visually-hidden();
    }
}