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