1/** 2 * @file 3 * Secondary navigation styling. 4 */ 5 6@import "../../base/variables.pcss.css"; 7 8.secondary-nav { 9 letter-spacing: 0.02em; 10 font-size: var(--font-size-s); 11 font-weight: 600; 12} 13 14.secondary-nav__menu { 15 display: flex; 16 align-items: center; 17 margin-block: 0; 18 margin-inline-start: 0; 19 margin-inline-end: 0; 20 padding-block: 0; 21 padding-inline-start: 0; 22 padding-inline-end: 0; 23 list-style: none; 24} 25 26.secondary-nav__menu-item { 27 /* Parent element is set to flex-basis: 0. We 28 * don't want text to wrap unless it goes over a 29 * certain arbitrary width. 30 */ 31 32 /* @todo should this be scoped to desktop nav? */ 33 width: max-content; 34 max-width: 200px; 35 36 &:not(:last-child) { 37 margin-inline-end: var(--sp1-5); 38 } 39} 40 41.secondary-nav__menu-link { 42 position: relative; 43 display: inline-flex; 44 align-items: center; 45 height: var(--sp2); 46 text-decoration: none; 47 color: inherit; 48 49 &:after { 50 position: absolute; 51 bottom: 0; 52 left: 0; 53 width: 100%; 54 height: 0; 55 content: ""; 56 transition: opacity 0.2s, transform 0.2s; 57 transform: translateY(5px); 58 opacity: 0; 59 /* Intentionally not using CSS logical properties. */ 60 border-top: solid 2px currentColor; 61 } 62 63 &:hover { 64 &:after { 65 transform: translateY(0); 66 opacity: 0.8; 67 } 68 } 69} 70 71body:not(.is-always-mobile-nav) { 72 @media (--nav) { 73 & .secondary-nav { 74 position: relative; 75 display: flex; 76 margin-inline-start: var(--sp); 77 padding-inline-start: var(--sp2); 78 79 &:before { 80 position: absolute; 81 inset-block-start: 50%; 82 inset-inline-start: 0; 83 width: 2px; 84 height: var(--sp2); 85 content: ""; 86 transform: translateY(-50%); 87 background-color: var(--color--gray-70); 88 } 89 } 90 91 & .secondary-nav__menu-item:not(:last-child) { 92 margin-inline-end: var(--sp2); 93 } 94 95 & .secondary-nav__menu-link { 96 &:focus { 97 position: relative; 98 outline: 0; 99 100 &:before { 101 position: absolute; 102 top: 50%; 103 left: 50%; 104 width: calc(100% + var(--sp)); 105 height: var(--sp3); 106 content: ""; 107 transform: translate(-50%, -50%); 108 border: solid 2px var(--color--blue-50); 109 border-radius: 4px; 110 } 111 } 112 } 113 } 114} 115