_link.scss

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

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

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

    &--bold {
        font-weight: $weight--bold;
    }

    &--download {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        margin-top: 5px;
        color: $color--white;
        background: $color--light-blue;
        transition: background-color, $transition;

        @include media-query(mob-landscape) {
            max-width: 300px;
        }

        &:focus,
        &:hover {
            background-color: $color--dark-blue;
        }

        > div {
            display: flex;
            align-items: center;
        }

        span {
            @extend %h5;
            margin-left: 10px;
            font-weight: $weight--bold;
        }

        svg {
            &:first-child {
                width: 26px;
                height: 32px;
                stroke: $color--white;
            }

            &:last-child {
                width: 12px;
                height: 18px;
                stroke: $color--white;
            }
        }
    }

    &--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;
        }
    }

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

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

    &--open-feed {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 10;
        display: flex;
        align-items: center;
        width: 60px;
        height: 60px;
        color: $color--white;
        background: url('./../../images/speech-bubble-blue.svg') no-repeat center;

        @include media-query(tablet-portrait) {
            @include button($color--light-blue, $color--dark-blue);
            right: 5%;
            bottom: 0;
            width: auto;
            height: auto;
            padding: 8px 20px;
            background: $color--light-blue;
            border: 0;

            &::after {
                width: 30px;
                height: 30px;
                margin-left: 30px;
                font-size: 30px;
                line-height: .9;
                text-align: center;
                border: 2px solid $color--white;
                border-radius: 50%;
                content: '+';
            }
        }

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

    &--close-feed {
        position: absolute;
        top: 20px;
        right: 0;
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
        color: $color--white;
        text-transform: uppercase;

        @include media-query(tablet-portrait) {
            top: 25px;
        }

        &::after {
            width: 30px;
            height: 30px;
            margin-left: 10px;
            font-size: 30px;
            line-height: .1;
            text-align: center;
            border: 2px solid $color--white;
            border-radius: 50%;
            content: '_';

            @include media-query(tablet-portrait) {
                margin-left: 20px;
            }
        }
    }

    &--to-top {
        position: fixed;
        right: 20px;
        bottom: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        color: $color--black-50;
        opacity: 0;
        transition: opacity $transition;

        @include media-query(tablet-portrait) {
            right: 30px;
            bottom: 20px;
        }

        &.is-visible {
            opacity: 1;
        }
    }

    &--edit-submission {
        display: flex;
        align-items: center;
        font-weight: $weight--bold;
        color: $color--mid-grey;

        &:hover {
            cursor: not-allowed;
        }

        @include media-query(tablet-landscape) {
            margin-left: auto;
        }

        &.is-active {
            color: $color--light-blue;

            &:hover {
                cursor: pointer;
            }
        }
    }

    &--toggle-reviewers {
        display: block;
        margin: 0 10px 30px;
    }
}