// Boiler plate string replace functionality
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace +
            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@mixin ext-icon($color) {
    $icon-color: str-replace(#{$color}, '#', '%23');
    background-image: url('data:image/svg+xml,<svg%20width="5"%20height="5"%20xmlns="http://www.w3.org/2000/svg"%20fill="#{$icon-color}"><path%20fill-rule="evenodd"%20d="M0%200L100%200%20100%20100z"/></svg>');
    background-repeat: no-repeat;
}

@mixin base-link-style {
    transition: color 0.1s linear;
    font-weight: $sd-font-weight-bold;
    cursor: pointer;
    color: $base-link;
    text-decoration: none;
    &:hover,
    &:active,
    &:focus {
        color: $hover-link;
        text-decoration: underline;
    }
    &::after {
        @include ext-icon($base-link);
    }
    &.mod-secondary,
    &.mod-tertiary {
        text-decoration: underline;
    }
    &.mod-secondary,
    &.mod-tertiary {
        color: $gray8;
        &:hover,
        &:active,
        &:focus {
            color: $gray8;
            background-color: rgba($gray8, 0.1); // if not using transparency: $gray3
        }
        &::after {
            @include ext-icon($gray8);
        }
    }
    &.mod-tertiary {
        font-weight: $sd-font-weight-regular;
    }
    &.mod-inverted {
        color: $white;
        &:hover,
        &:active,
        &:focus {
            color: $white;
            background-color: rgba($white, 0.3);
        }
        &::after {
            @include ext-icon($white);
        }
    }
}

@mixin sd-link {
    @include base-link-style;
    text-decoration: underline;
    &:hover,
    &:active,
    &:focus {
        background-color: rgba($blue, 0.3); // if not using transparency: #cbeef9
    }
}

.sd-link {
    @include sd-link;
}

a,
.a-link {
    @include base-link-style;
    &.button,
    &.sd-button {
        text-decoration: none;
    }
    &[target='_blank'] {
        &::before {
            content: '(Opens in a new window)';
            @include visually-hidden;
        }
    }
    // TODO - dart-sass doesn't support the the 'i' variable in an attribute selector, which marks it case insensitive
    // Example ... :not([href*='.23andme.' i]) ...
    &[href*='//']:not([href*='.23andme.']):not([href*='.23andmeforums.']) {
        &::after {
            display: inline-block;
            height: 5px;
            width: 5px;
            margin-right: 2px;
            margin-left: 1px;
            content: '';
            vertical-align: super;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            @media print {
                display: none;
            }
        }
        &.no-external-icon,
        &.button,
        &.utility-button {
            &::after {
                display: none !important;
                content: none !important;
            }
        }
        // Fix conflict with outlined button, external link icon, and box-shadow-hover:
        // Previously `content: none` was being used to remove the "external link triangle" icon from all button styles.
        // Since box-shadow-hover mixin uses `::after` pseudo element we need `content` to be present, so here we remove
        // the icon by resetting height, width, margin, and `background-image: none`.
        &[class^='sd-button'],
        &.mod-button-outlined,
        &.sd-secondary-button {
            &::after {
                height: unset;
                width: unset;
                margin: unset;
                background-image: none;
            }
        }
    }
}