.main-nav {
display: flex; flex-direction: column; opacity: 0; transition: width 250ms ease-in-out; visibility: hidden; width: 0; &--open { opacity: 1; width: 12rem; visibility: visible; } &__wrapper { background: $white; bottom: 0; position: fixed; right: 0; top: 0; } &__toggle { border: none; box-shadow: 0 0 15px $red; background: $black; border-radius: 50%; color: $white; cursor: pointer; font-size: 2em; font-weight: 700; height: 4rem; letter-spacing: 3px; outline: 0; position: fixed; right: 1rem; text-align: center; top: 80vh; transition: right 250ms ease-in-out; width: 4rem; } &__toggle:hover { box-shadow: 0 0 5px $red; } &__toggle--open { right: 13rem; } &__link { margin: 0 auto 1rem; } &__link:first-child { margin-top: 1rem; }
}