_link.scss

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

    &--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 {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: $weight--semibold;

        svg {
            width: 10px;
            height: 14px;
            margin-left: 10px;
            fill: $color--dark-blue;
        }
    }
}