@mixin base() {
    @include rhythmBorder($horizontal-multiplier: 2);

    color: $component-content-inverse-text;
    display: block;
    text-decoration: none;
    width: 100%;

    &:hover {
        background-color: rgba(255, 255, 255, 0.1);
        opacity: 0.6;
    }

    &:focus {
        background-color: rgba(0, 0, 0, 0.2);
    }

    &:active {
        background-color: rgba(0, 0, 0, 0.3);
    }

    @media (min-width: 801px) {
        display: none;
    }
}

&__toggle-link {
    @include base;
}