.navigation { @include padding-leader; background: $color-background; li { @include trailer(.5); &:last-child { margin-bottom: 0; } } a { @include padding-leader(.5); @include padding-trailer(.5); display: block; padding: { right: $gutter-width; left: $gutter-width; } background: mix($color-background, $color-background-shade); &:hover, &:focus { background: $color-background-shade; } } @include at-breakpoint($tablet-small) { margin: { right: 0; left: 0; } ul { @extend %clear-fix-tablet-small; } li { float: left; width: 50%; &:nth-child(odd) { clear: both; padding-right: $gutter-width / 2; } &:nth-child(even) { padding-left: $gutter-width / 2; } } } @include at-breakpoint($tablet-large) { @extend %table-cell-tablet-large; margin: 0; padding: 0; text-align: right; background: none; &.collapse { display: table-cell !important; } ul { display: inline-block; margin: 0 #{-$gutter-width} 0 $gutter-width; } li { margin: { right: $gutter-width; bottom: 0; } width: auto; &:nth-child(odd) { clear: none; padding-right: 0; } &:nth-child(even) { padding-left: 0; } &:last-child { margin-right: 0; } } a { background: none; &:hover, &:focus { background: $color-background-shade; } } } }