.wiki-nav {
    padding: 0;
    width: 240px;
    .title {
        @include font-size(larger);
        padding: 2rem 1rem 0 2rem;
    }
    .add-button {
        align-items: center;
        display: flex;
        padding: 1rem 1rem 1rem 2rem;
        text-transform: uppercase;
        vertical-align: middle;
        &:hover {
            svg {
                background: $primary-light;
            }
        }
        svg {
            @include svg-size(1.25rem);
            background: $gray-light;
            border-radius: 2px;
            fill: $white;
            margin-right: .5rem;
            padding: .25rem;
            transition: background .2s linear;
        }
    }
    .wiki-link-container {
        margin: 0;
        &.wiki-all-links {
            border-top: 1px solid $gray-light;
        }
    }
    input[type="text"] {
        background: $whitish;
        color: $grayer;
        margin: 1rem 1rem 1rem 2rem;
        width: 80%;
        @include placeholder {
            color: $gray-light;
        }
    }
    .loading {
        padding: 1rem;
        text-align: center;
    }
}
.wiki-link {
    align-items: center;
    border-bottom: 1px solid $whitish;
    display: flex;
    justify-content: space-between;
    margin-left: 2rem;
    padding-right: 1rem;
    position: relative;
    &:hover {
        .remove-wiki-page {
            cursor: pointer;
            opacity: 1;
            transition: opacity .2s linear;
            transition-delay: .1s;
        }
        .dragger {
            cursor: move;
            opacity: 1;
            transition: opacity .2s linear;
            transition-delay: .1s;
        }
    }
    &.gu-mirror {
        border-bottom: 0;
    }
    &.fixed-link {
        @include font-size(large);
        text-transform: uppercase;
    }
    &.is-sortable {
        cursor: move;
    }
    .link-title {
        cursor: pointer;
        display: block;
        flex-grow: 1;
        padding: 1rem 0;
    }
    .dragger {
        fill: $gray-light;
        left: -1rem;
        opacity: 0;
        position: absolute;
        top: 1rem;
        svg {
            @include svg-size(.7rem);
        }
    }
    .remove-wiki-page {
        opacity: 0;
        &:hover {
            .icon {
                fill: $red;
            }
        }
    }
}