_link.scss

.link {
    &--button {
        @include button($color--light-blue, $color--dark-blue);
        display: inline-block;


        &--narrow {
            @include button--narrow;
        }

        &__stretch {
            width: 100%;

            @include media-query(mob-landscape) {
                width: inherit;
            }
        }

        &__center {
            display: block;
            width: fit-content;
            margin: 0 auto;
        }
    }

    &--button-secondary {
        @include button($color--purple, darken($color--purple, 20%));
    }

    &--button-transparent {
        @include button(transparent, $color--darkest-blue);
        color: $color--white;

        &:hover {
            border: 1px solid transparent;
        }
    }

    &--button-long-text {
        padding: 10px;

        @include media-query(tablet-portrait) {
            padding: 10px 60px;
        }
    }

    &--underlined {
        text-decoration: underline;
    }

    &--footer-signup {
        margin-top: 1rem;
    }

    &--mobile-standout {
        display: block;
        width: 100%;
        max-width: 250px;
        margin: 1rem auto 0;
        font-weight: $weight--bold;
        text-align: center;

        @include media-query(tablet-portrait) {
            display: none;
        }
    }

    &--fixed-apply {
        @include button($color--purple, darken($color--purple, 20%));
        position: fixed;
        bottom: 0;
        z-index: 100;
        display: none;
        color: $color--white;
        border: 0;

        @include media-query(tablet-portrait) {
            right: 5%;
            display: block;
        }

        @include media-query(tablet-landscape) {
            right: 10%;
        }
    }

    &--small {
        font-size: 17px;
    }

    &--arrow-pixels-blue {
        @include pixel-link($color--dark-blue);
    }

    &--arrow-pixels-white {
        @include pixel-link($color--white);
    }
}