1/*
2 * DO NOT EDIT THIS FILE.
3 * See the following change record for more information,
4 * https://www.drupal.org/node/3084859
5 * @preserve
6 */
7
8/**
9 * @file
10 * Secondary navigation styling.
11 */
12
13.secondary-nav {
14  letter-spacing: 0.02em;
15  font-size: 0.875rem;
16  font-weight: 600;
17}
18
19[dir="ltr"] .secondary-nav__menu {
20  margin-left: 0;
21}
22
23[dir="rtl"] .secondary-nav__menu {
24  margin-right: 0;
25}
26
27[dir="ltr"] .secondary-nav__menu {
28  margin-right: 0;
29}
30
31[dir="rtl"] .secondary-nav__menu {
32  margin-left: 0;
33}
34
35[dir="ltr"] .secondary-nav__menu {
36  padding-left: 0;
37}
38
39[dir="rtl"] .secondary-nav__menu {
40  padding-right: 0;
41}
42
43[dir="ltr"] .secondary-nav__menu {
44  padding-right: 0;
45}
46
47[dir="rtl"] .secondary-nav__menu {
48  padding-left: 0;
49}
50
51.secondary-nav__menu {
52  display: flex;
53  align-items: center;
54  margin-top: 0;
55  margin-bottom: 0;
56  padding-top: 0;
57  padding-bottom: 0;
58  list-style: none;
59}
60
61.secondary-nav__menu-item {
62  /* Parent element is set to flex-basis: 0. We
63   * don't want text to wrap unless it goes over a
64   * certain arbitrary width.
65   */
66
67  /* @todo should this be scoped to desktop nav? */
68  width: -webkit-max-content;
69  width: max-content;
70  max-width: 12.5rem
71}
72
73[dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
74    margin-right: 1.6875rem;
75}
76
77[dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
78    margin-left: 1.6875rem;
79}
80
81.secondary-nav__menu-link {
82  position: relative;
83  display: inline-flex;
84  align-items: center;
85  height: 2.25rem;
86  text-decoration: none;
87  color: inherit
88}
89
90.secondary-nav__menu-link:after {
91    position: absolute;
92    bottom: 0;
93    left: 0;
94    width: 100%;
95    height: 0;
96    content: "";
97    transition: opacity 0.2s, transform 0.2s;
98    transform: translateY(0.3125rem);
99    opacity: 0;
100    /* Intentionally not using CSS logical properties. */
101    border-top: solid 2px currentColor;
102  }
103
104.secondary-nav__menu-link:hover:after {
105      transform: translateY(0);
106      opacity: 0.8;
107    }
108
109@media (min-width: 75rem) {
110    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
111      margin-left: 1.125rem;
112  }
113    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
114      margin-right: 1.125rem;
115  }
116    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
117      padding-left: 2.25rem;
118  }
119    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
120      padding-right: 2.25rem;
121  }
122    body:not(.is-always-mobile-nav) .secondary-nav {
123      position: relative;
124      display: flex
125    }
126
127      [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before {
128        left: 0;
129  }
130
131      [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before {
132        right: 0;
133  }
134
135      body:not(.is-always-mobile-nav) .secondary-nav:before {
136        position: absolute;
137        top: 50%;
138        width: 2px;
139        height: 2.25rem;
140        content: "";
141        transform: translateY(-50%);
142        background-color: #d7e1e8;
143      }
144
145    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
146      margin-right: 2.25rem;
147  }
148
149    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
150      margin-left: 2.25rem;
151  }
152      body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
153        position: relative;
154        outline: 0
155      }
156
157        body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus:before {
158          position: absolute;
159          top: 50%;
160          left: 50%;
161          width: calc(100% + 1.125rem);
162          height: 3.375rem;
163          content: "";
164          transform: translate(-50%, -50%);
165          border: solid 2px #2494db;
166          border-radius: 0.25rem;
167        }
168  }
169