/* * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/3084859 * @preserve */ [dir="ltr"] .tabs { margin-left: 0 } [dir="rtl"] .tabs { margin-right: 0 } [dir="ltr"] .tabs { margin-right: 0 } [dir="rtl"] .tabs { margin-left: 0 } [dir="ltr"] .tabs { padding-left: 0 } [dir="rtl"] .tabs { padding-right: 0 } [dir="ltr"] .tabs { padding-right: 0 } [dir="rtl"] .tabs { padding-left: 0 } .tabs { display: flex; flex-direction: column; width: 100%; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; list-style: none } @media (min-width: 43.75rem) { .tabs { flex-direction: row; flex-wrap: wrap } } .tabs__tab { display: none; margin: 0; margin-bottom: -1px } .tabs__tab.is-active { display: flex; } @media (min-width: 43.75rem) { .tabs__tab { display: flex; margin: 0; margin-bottom: -1px } } html:not(.js) .tabs__tab, .tabs.is-expanded .tabs__tab { display: flex; } .tabs--secondary .tabs__tab { display: block } @media (min-width: 43.75rem) { .tabs--secondary .tabs__tab { display: flex } } [dir="ltr"] .tabs__link { padding-left: 1.6875rem } [dir="rtl"] .tabs__link { padding-right: 1.6875rem } [dir="ltr"] .tabs__link { padding-right: 1.6875rem } [dir="rtl"] .tabs__link { padding-left: 1.6875rem } .tabs__link { display: flex; flex-grow: 1; align-items: center; height: 3.375rem; padding-top: 0; padding-bottom: 0; transition: background-color 0.2s; text-decoration: none; letter-spacing: 1px; color: #6e7172; border: 1px solid #e7edf1; background-color: #f7f9fa; font-size: 0.875rem; } .tabs--secondary .tabs__link { text-transform: none } @media (min-width: 43.75rem) { .tabs--secondary .tabs__link { border-top-color: transparent; border-right-color: transparent; border-left-color: transparent; background-color: transparent } } .tabs__link:focus { outline: solid 3px #2494db; outline-offset: -3px; } .tabs__link:hover { background-color: #e7edf1; } .tabs__link.is-active { position: relative; color: #0d1214; font-weight: 600 } [dir="ltr"] .tabs__link.is-active:after { left: -1px } [dir="rtl"] .tabs__link.is-active:after { right: -1px } [dir="ltr"] .tabs__link.is-active:after { border-left: 6px solid #2494db } [dir="rtl"] .tabs__link.is-active:after { border-right: 6px solid #2494db } .tabs__link.is-active:after { position: absolute; bottom: -1px; height: calc(100% + 2px); content: ""; } @media (min-width: 43.75rem) { [dir="ltr"] .tabs__link.is-active:after { left: 0 } [dir="rtl"] .tabs__link.is-active:after { right: 0 } [dir="ltr"] .tabs__link.is-active:after { border-left: 0 } [dir="rtl"] .tabs__link.is-active:after { border-right: 0 } .tabs__link.is-active:after { width: 100%; height: auto; border-top: 6px solid #2494db; } } [dir="ltr"] .tabs__trigger { margin-left: -1px } [dir="rtl"] .tabs__trigger { margin-right: -1px } [dir="ltr"] .tabs__trigger { margin-right: 0 } [dir="rtl"] .tabs__trigger { margin-left: 0 } .tabs__trigger { display: flex; align-items: center; justify-content: center; width: 3.375rem; margin-top: 0; margin-bottom: 0; cursor: pointer; border: solid 1px #e7edf1; background-color: #f7f9fa } .tabs__trigger:hover { background-color: #e7edf1; } .tabs__trigger:focus { position: relative; border-color: #2494db; outline: none; } @media (min-width: 43.75rem) { .tabs__trigger { display: none } } html:not(.js) .tabs__trigger { display: none; } .tabs__trigger-icon { position: relative; display: block; width: 1.125rem; height: 0.625rem; margin-top: -2px } [dir="ltr"] .tabs__trigger-icon > span { left: 0 } [dir="rtl"] .tabs__trigger-icon > span { right: 0 } .tabs__trigger-icon > span { position: absolute; display: block; width: 100%; transition: transform 0.2s, opacity 0.2s, top 0.2s; border-top: solid 2px #2494db } .tabs__trigger-icon > span:nth-child(1) { top: 0; } .tabs__trigger-icon > span:nth-child(2) { top: calc(50% + 1px); } .tabs__trigger-icon > span:nth-child(3) { top: calc(100% + 2px); } .tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(1) { top: calc(50% + 1px); transform: rotate(45deg); } .tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(2) { opacity: 0; } .tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(3) { top: calc(50% + 1px); transform: rotate(-45deg); }