/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ BUTTON \* ˍˍˍˍˍˍˍˍˍ */ .fr-btn { --text-spacing: 0; --title-spacing: 0; display: inline-flex; flex-direction: row; align-items: center; width: -moz-fit-content; width: fit-content; --underline-img: none; --hover-tint: var(--hover); font-weight: 500; font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; background-color: var(--background-action-high-blue-france); --idle: transparent; --hover: var(--background-action-high-blue-france-hover); --active: var(--background-action-high-blue-france-active); color: var(--text-inverted-blue-france); } .fr-btn::before, .fr-btn::after { display: block; } .fr-btn[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn[target=_blank]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btn--align-on-content { margin-left: -1rem; margin-right: -1rem; } .fr-btn[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-btn[class^=fr-icon-]:not([class*=fr-btn--icon-])::before, .fr-btn[class*=" fr-icon-"]:not([class*=fr-btn--icon-])::before, .fr-btn[class^=fr-fi-]:not([class*=fr-btn--icon-])::before, .fr-btn[class*=" fr-fi-"]:not([class*=fr-btn--icon-])::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; } .fr-btn--align-on-content[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn--align-on-content[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn--align-on-content[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn--align-on-content[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { margin-left: -0.5rem; margin-right: -0.5rem; } .fr-btn--icon-left[class^=fr-icon-], .fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--icon-left[class^=fr-fi-], .fr-btn--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--icon-left[class^=fr-icon-]::before, .fr-btn--icon-left[class*=" fr-icon-"]::before, .fr-btn--icon-left[class^=fr-fi-]::before, .fr-btn--icon-left[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-btn--align-on-content.fr-btn--icon-left[class^=fr-icon-], .fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--align-on-content.fr-btn--icon-left[class^=fr-fi-], .fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-fi-"] { margin-left: -0.875rem; margin-right: -1rem; } .fr-btn--icon-right[class^=fr-icon-], .fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--icon-right[class^=fr-fi-], .fr-btn--icon-right[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--icon-right[class^=fr-icon-]::after, .fr-btn--icon-right[class*=" fr-icon-"]::after, .fr-btn--icon-right[class^=fr-fi-]::after, .fr-btn--icon-right[class*=" fr-fi-"]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btn--icon-right[class^=fr-icon-]::before, .fr-btn--icon-right[class*=" fr-icon-"]::before, .fr-btn--icon-right[class^=fr-fi-]::before, .fr-btn--icon-right[class*=" fr-fi-"]::before { content: none; } .fr-btn--align-on-content.fr-btn--icon-right[class^=fr-icon-], .fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--align-on-content.fr-btn--icon-right[class^=fr-fi-], .fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-fi-"] { margin-left: -1rem; margin-right: -0.875rem; } .fr-btn--sm { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; } .fr-btn--sm[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--sm[target=_blank]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btn--sm.fr-btn--align-on-content { margin-left: -0.75rem; margin-right: -0.75rem; } .fr-btn--sm[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn--sm[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn--sm[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn--sm[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-btn--sm[class^=fr-icon-]:not([class*=fr-btn--icon-])::before, .fr-btn--sm[class*=" fr-icon-"]:not([class*=fr-btn--icon-])::before, .fr-btn--sm[class^=fr-fi-]:not([class*=fr-btn--icon-])::before, .fr-btn--sm[class*=" fr-fi-"]:not([class*=fr-btn--icon-])::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; } .fr-btn--sm.fr-btn--align-on-content[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn--sm.fr-btn--align-on-content[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn--sm.fr-btn--align-on-content[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn--sm.fr-btn--align-on-content[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { margin-left: -0.5rem; margin-right: -0.5rem; } .fr-btn--sm.fr-btn--icon-left[class^=fr-icon-], .fr-btn--sm.fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--sm.fr-btn--icon-left[class^=fr-fi-], .fr-btn--sm.fr-btn--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--sm.fr-btn--icon-left[class^=fr-icon-]::before, .fr-btn--sm.fr-btn--icon-left[class*=" fr-icon-"]::before, .fr-btn--sm.fr-btn--icon-left[class^=fr-fi-]::before, .fr-btn--sm.fr-btn--icon-left[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-left[class^=fr-icon-], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-left[class^=fr-fi-], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-fi-"] { margin-left: -0.625rem; margin-right: -0.75rem; } .fr-btn--sm.fr-btn--icon-right[class^=fr-icon-], .fr-btn--sm.fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--sm.fr-btn--icon-right[class^=fr-fi-], .fr-btn--sm.fr-btn--icon-right[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--sm.fr-btn--icon-right[class^=fr-icon-]::after, .fr-btn--sm.fr-btn--icon-right[class*=" fr-icon-"]::after, .fr-btn--sm.fr-btn--icon-right[class^=fr-fi-]::after, .fr-btn--sm.fr-btn--icon-right[class*=" fr-fi-"]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btn--sm.fr-btn--icon-right[class^=fr-icon-]::before, .fr-btn--sm.fr-btn--icon-right[class*=" fr-icon-"]::before, .fr-btn--sm.fr-btn--icon-right[class^=fr-fi-]::before, .fr-btn--sm.fr-btn--icon-right[class*=" fr-fi-"]::before { content: none; } .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-right[class^=fr-icon-], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-right[class^=fr-fi-], .fr-btn--sm.fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-fi-"] { margin-left: -0.75rem; margin-right: -0.625rem; } .fr-btn--lg { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; } .fr-btn--lg[target=_blank] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--lg[target=_blank]::after { content: ""; --icon-size: 1.5rem; margin-right: -0.1875rem; margin-left: 0.5rem; } .fr-btn--lg.fr-btn--align-on-content { margin-left: -1.5rem; margin-right: -1.5rem; } .fr-btn--lg[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn--lg[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn--lg[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn--lg[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { overflow: hidden; white-space: nowrap; max-width: 3rem; max-height: 3rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-btn--lg[class^=fr-icon-]:not([class*=fr-btn--icon-])::before, .fr-btn--lg[class*=" fr-icon-"]:not([class*=fr-btn--icon-])::before, .fr-btn--lg[class^=fr-fi-]:not([class*=fr-btn--icon-])::before, .fr-btn--lg[class*=" fr-fi-"]:not([class*=fr-btn--icon-])::before { --icon-size: 2rem; margin-left: 0; margin-right: 0.5rem; } .fr-btn--lg.fr-btn--align-on-content[class^=fr-icon-]:not([class*=fr-btn--icon-]), .fr-btn--lg.fr-btn--align-on-content[class*=" fr-icon-"]:not([class*=fr-btn--icon-]), .fr-btn--lg.fr-btn--align-on-content[class^=fr-fi-]:not([class*=fr-btn--icon-]), .fr-btn--lg.fr-btn--align-on-content[class*=" fr-fi-"]:not([class*=fr-btn--icon-]) { margin-left: -0.5rem; margin-right: -0.5rem; } .fr-btn--lg.fr-btn--icon-left[class^=fr-icon-], .fr-btn--lg.fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--lg.fr-btn--icon-left[class^=fr-fi-], .fr-btn--lg.fr-btn--icon-left[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--lg.fr-btn--icon-left[class^=fr-icon-]::before, .fr-btn--lg.fr-btn--icon-left[class*=" fr-icon-"]::before, .fr-btn--lg.fr-btn--icon-left[class^=fr-fi-]::before, .fr-btn--lg.fr-btn--icon-left[class*=" fr-fi-"]::before { --icon-size: 1.5rem; margin-left: -0.1875rem; margin-right: 0.5rem; } .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-left[class^=fr-icon-], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-icon-"], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-left[class^=fr-fi-], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-left[class*=" fr-fi-"] { margin-left: -1.3125rem; margin-right: -1.5rem; } .fr-btn--lg.fr-btn--icon-right[class^=fr-icon-], .fr-btn--lg.fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--lg.fr-btn--icon-right[class^=fr-fi-], .fr-btn--lg.fr-btn--icon-right[class*=" fr-fi-"] { overflow: initial; max-width: 100%; max-height: none; } .fr-btn--lg.fr-btn--icon-right[class^=fr-icon-]::after, .fr-btn--lg.fr-btn--icon-right[class*=" fr-icon-"]::after, .fr-btn--lg.fr-btn--icon-right[class^=fr-fi-]::after, .fr-btn--lg.fr-btn--icon-right[class*=" fr-fi-"]::after { content: ""; --icon-size: 1.5rem; margin-right: -0.1875rem; margin-left: 0.5rem; } .fr-btn--lg.fr-btn--icon-right[class^=fr-icon-]::before, .fr-btn--lg.fr-btn--icon-right[class*=" fr-icon-"]::before, .fr-btn--lg.fr-btn--icon-right[class^=fr-fi-]::before, .fr-btn--lg.fr-btn--icon-right[class*=" fr-fi-"]::before { content: none; } .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-right[class^=fr-icon-], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-icon-"], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-right[class^=fr-fi-], .fr-btn--lg.fr-btn--align-on-content.fr-btn--icon-right[class*=" fr-fi-"] { margin-left: -1.5rem; margin-right: -1.3125rem; } .fr-btns-group { --ul-type: none; --ol-type: none; --ul-start: 0; --ol-start: 0; --xl-block: 0; --li-bottom: 0; --ol-content: none; display: flex; align-items: stretch; flex-wrap: wrap; margin-left: -0.5rem; margin-right: -0.5rem; /** * fr-btns-group--inline : aligne les boutons horizontalement dans tout les cas * fr-btns-group--inline-(sm/md/lg) : permet de passer en horizontal à partir de la valeur du breakpoint appliqué (sm, md, lg) */ /** * fr-btns-group--left : (Défaut) aligne les boutons sur la gauche (en lecture L-t-R) */ /** * fr-btns-group--right : aligne les boutons sur la droite */ /** * fr-btns-group--center : aligne les boutons au centre du conteneur */ /** * fr-btns-group--center : aligne les boutons au centre du conteneur */ /** * fr-btns-group--equisized : Fixe la largeur des boutons à celle du plus grand. Géré en grande partie en JS. */ /** * fr-btns-group--sm : Fixe les boutons à la taille SM */ /** * fr-btns-group--md : (défaut) Fixe les boutons à la taille MD */ /** * fr-btns-group--lg : Fixe les boutons à la taille LG (sans modfifieur => MD) */ } .fr-btns-group > li, .fr-btns-group > div { width: 100%; max-width: 100%; } .fr-btns-group .fr-btn { width: calc(100% - 1rem); margin: 0 0.5rem 1rem; justify-content: center; } .fr-btns-group--inline .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-btns-group--inline > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } .fr-btns-group--left, .fr-btns-group--left li { justify-content: flex-start; text-align: left; } .fr-btns-group--right, .fr-btns-group--right li { justify-content: flex-end; text-align: right; } .fr-btns-group--center, .fr-btns-group--center li { justify-content: center; text-align: center; } .fr-btns-group--between, .fr-btns-group--between li { justify-content: space-between; text-align: center; } .fr-btns-group--equisized { --equisized-width: auto; } .fr-btns-group--equisized .fr-btn { justify-content: center; width: var(--equisized-width); } .fr-btns-group--sm .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; } .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-], .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"], .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-fi-], .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"] { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; justify-content: flex-start; } .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-]::before, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-fi-]::before, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; } .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class^=fr-icon-], .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"], .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class^=fr-fi-], .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"] { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class^=fr-icon-]::before, .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class^=fr-fi-]::before, .fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^=fr-icon-], .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"], .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^=fr-fi-], .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"] { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::after, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::after, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^=fr-fi-]::after, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::before, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class^=fr-fi-]::before, .fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::before { content: none; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-fi-], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"] { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; justify-content: flex-start; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-fi-]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class^=fr-icon-], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class^=fr-fi-], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"] { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class^=fr-icon-]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class^=fr-fi-]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"]::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^=fr-icon-], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^=fr-fi-], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"] { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::after, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::after, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^=fr-fi-]::after, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::after { content: ""; --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; } .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class^=fr-fi-]::before, .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::before { content: none; } .fr-btns-group--lg .fr-btn:not([class^=fr-icon-]):not([class*=" fr-icon-"]):not([class^=fr-fi-]):not([class*=" fr-fi-"]) { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; } .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-], .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"], .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-fi-], .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"] { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; overflow: hidden; white-space: nowrap; max-width: 3rem; max-height: 3rem; padding-left: 0.5rem; padding-right: 0.5rem; justify-content: flex-start; } .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-]::before, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-fi-]::before, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before { --icon-size: 2rem; margin-left: 0; margin-right: 0.5rem; } .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class^=fr-icon-], .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"], .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class^=fr-fi-], .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"] { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class^=fr-icon-]::before, .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class^=fr-fi-]::before, .fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*=" fr-fi-"]::before { --icon-size: 1.5rem; margin-left: -0.1875rem; margin-right: 0.5rem; } .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^=fr-icon-], .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"], .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^=fr-fi-], .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"] { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::after, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::after, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^=fr-fi-]::after, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::after { content: ""; --icon-size: 1.5rem; margin-right: -0.1875rem; margin-left: 0.5rem; } .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^=fr-icon-]::before, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class^=fr-fi-]::before, .fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*=" fr-fi-"]::before { content: none; } .fr-fieldset__element > .fr-btns-group { margin-bottom: -1rem; } .fr-btn--close { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; display: flex; margin-left: auto; } .fr-btn--close::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/system/close-line.svg"); mask-image: url("../../icons/system/close-line.svg"); content: ""; } .fr-btn--close::before { content: none; } .fr-btn--tooltip { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: hidden; white-space: nowrap; max-width: 2rem; max-height: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-btn--tooltip::before { --icon-size: 1rem; margin-left: 0; margin-right: 0.5rem; flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/system/question-line.svg"); mask-image: url("../../icons/system/question-line.svg"); content: ""; } .fr-btn--fullscreen { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btn--fullscreen::after { --icon-size: 1rem; margin-right: -0.125rem; margin-left: 0.5rem; flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/media/fullscreen-line.svg"); mask-image: url("../../icons/media/fullscreen-line.svg"); content: ""; } .fr-btn--fullscreen::before { content: none; } .fr-btn--display { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btn--display::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/system/fr--theme-fill.svg"); mask-image: url("../../icons/system/fr--theme-fill.svg"); content: ""; } .fr-btn--account { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btn--account::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/user/account-circle-fill.svg"); mask-image: url("../../icons/user/account-circle-fill.svg"); content: ""; } .fr-btn--team { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btn--team::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/user/team-line.svg"); mask-image: url("../../icons/user/team-line.svg"); content: ""; } .fr-btn--briefcase { font-size: 0.875rem; line-height: 1.5rem; min-height: 2rem; padding: 0.25rem 0.75rem; overflow: initial; max-width: 100%; max-height: none; } .fr-btn--briefcase::before { --icon-size: 1rem; margin-left: -0.125rem; margin-right: 0.5rem; flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/business/briefcase-fill.svg"); mask-image: url("../../icons/business/briefcase-fill.svg"); content: ""; } .fr-btn:disabled, a.fr-btn:not([href]) { color: var(--text-disabled-grey); background-color: var(--background-disabled-grey); --idle: transparent; --hover: var(--background-disabled-grey-hover); --active: var(--background-disabled-grey-active); } .fr-btn--secondary { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france); } .fr-btn--secondary:disabled, a.fr-btn--secondary:not([href]) { color: var(--text-disabled-grey); box-shadow: inset 0 0 0 1px var(--border-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } .fr-btn--tertiary, .fr-btn--account { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); box-shadow: inset 0 0 0 1px var(--border-default-grey); } .fr-btn--tertiary:disabled, a.fr-btn--tertiary:not([href]), a.fr-btn--account:not([href]), .fr-btn--account:disabled { color: var(--text-disabled-grey); box-shadow: inset 0 0 0 1px var(--border-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } .fr-btn--tertiary-no-outline, .fr-btn--close, .fr-btn--display, .fr-btn--fullscreen, .fr-btn--tooltip, .fr-btn--briefcase, .fr-btn--team { background-color: transparent; --hover: inherit; --active: inherit; color: var(--text-action-high-blue-france); } .fr-btn--tertiary-no-outline:disabled, a.fr-btn--tertiary-no-outline:not([href]), a.fr-btn--close:not([href]), a.fr-btn--display:not([href]), a.fr-btn--fullscreen:not([href]), a.fr-btn--tooltip:not([href]), a.fr-btn--briefcase:not([href]), a.fr-btn--team:not([href]), .fr-btn--close:disabled, .fr-btn--display:disabled, .fr-btn--fullscreen:disabled, .fr-btn--tooltip:disabled, .fr-btn--briefcase:disabled, .fr-btn--team:disabled { color: var(--text-disabled-grey); background-color: transparent; --hover: inherit; --active: inherit; } @media (min-width: 36em) { /*! media sm */ .fr-btns-group--inline-sm .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-btns-group--inline-sm > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline-sm.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } /*! media sm */ } @media (min-width: 48em) { /*! media md */ .fr-btns-group--inline-md .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-btns-group--inline-md > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline-md.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } /*! media md */ } @media (min-width: 62em) { /*! media lg */ .fr-btns-group--inline-lg .fr-btn { width: auto; max-width: 100%; margin-left: 0.5rem; margin-right: 0.5rem; } .fr-btns-group--inline-lg > li { display: inline-flex; max-width: 100%; width: auto; } .fr-btns-group--inline-lg.fr-btns-group--right.fr-btns-group--inline-reverse { flex-direction: row-reverse; justify-content: flex-start; } /*! media lg */ } @media (min-width: 78em) { /*! media xl */ /*! media xl */ } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .fr-btn::before, .fr-btn::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; width: 1rem; height: 1rem; } .fr-btn[href] { text-decoration: none; } .fr-btn[class^=fr-icon-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn[class^=fr-icon-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after, .fr-btn[class*=" fr-icon-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn[class*=" fr-icon-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after, .fr-btn[class^=fr-fi-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn[class^=fr-fi-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after, .fr-btn[class*=" fr-fi-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn[class*=" fr-fi-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; width: 1.5rem; height: 1.5rem; } .fr-btn--sm::before, .fr-btn--sm::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; width: 0.75rem; height: 0.75rem; } .fr-btn--sm[class^=fr-icon-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn--sm[class^=fr-icon-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after, .fr-btn--sm[class*=" fr-icon-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn--sm[class*=" fr-icon-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after, .fr-btn--sm[class^=fr-fi-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn--sm[class^=fr-fi-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after, .fr-btn--sm[class*=" fr-fi-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn--sm[class*=" fr-fi-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; width: 1rem; height: 1rem; } .fr-btn--lg::before, .fr-btn--lg::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; width: 1.5rem; height: 1.5rem; } .fr-btn--lg[class^=fr-icon-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn--lg[class^=fr-icon-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after, .fr-btn--lg[class*=" fr-icon-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn--lg[class*=" fr-icon-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after, .fr-btn--lg[class^=fr-fi-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn--lg[class^=fr-fi-]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after, .fr-btn--lg[class*=" fr-fi-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::before, .fr-btn--lg[class*=" fr-fi-"]:not([class^=fr-btn--icon-]):not([class*=" fr-btn--icon-"])::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; width: 2rem; height: 2rem; } .fr-btn--close::before, .fr-btn--close::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; background-image: url("../../icons/system/close-line.svg"); width: 1rem; height: 1rem; } .fr-btn--tooltip::before, .fr-btn--tooltip::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; background-image: url("../../icons/system/question-line.svg"); width: 1rem; height: 1rem; } .fr-btn--fullscreen::before, .fr-btn--fullscreen::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; background-image: url("../../icons/media/fullscreen-line.svg"); width: 1rem; height: 1rem; } .fr-btn--display::before, .fr-btn--display::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; background-image: url("../../icons/system/fr--theme-fill.svg"); width: 1rem; height: 1rem; } .fr-btn--briefcase::before, .fr-btn--briefcase::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; background-image: url("../../icons/business/briefcase-fill.svg"); width: 1rem; height: 1rem; } .fr-btn--account::before, .fr-btn--account::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; background-image: url("../../icons/user/account-circle-fill.svg"); width: 1rem; height: 1rem; } .fr-btn--team::before, .fr-btn--team::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; background-image: url("../../icons/user/team-line.svg"); width: 1rem; height: 1rem; } ul.fr-btns-group { list-style-type: none; } ol.fr-btns-group { list-style-type: none; } ul.fr-btns-group, ol.fr-btns-group { padding-left: 0; margin-top: 0; margin-bottom: 0; } .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-]::before, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-]::after, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"]::after, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-fi-]::before, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-fi-]::after, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before, .fr-btns-group--sm:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; width: 1rem; height: 1rem; } .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-]::before, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-icon-]::after, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"]::before, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"]::after, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-fi-]::before, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^=fr-fi-]::after, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::before, .fr-btns-group--lg:not([class^=fr-btns-group--icon-]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"]::after { background-color: transparent; background-size: 100%; background-repeat: no-repeat; width: 2rem; height: 2rem; } .fr-btn { background-color: #000091; color: #f5f5fe; } .fr-btn:hover { background-color: #1212ff; } .fr-btn:active { background-color: #2323ff; } .fr-btn:disabled, a.fr-btn:not([href]) { color: #929292; background-color: #e5e5e5; } .fr-btn--secondary { background-color: transparent; color: #000091; box-shadow: inset 0 0 0 1px #000091; } .fr-btn--secondary:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--secondary:active { background-color: rgba(0, 0, 0, 0.1); } .fr-btn--secondary:disabled, a.fr-btn--secondary:not([href]) { color: #929292; box-shadow: inset 0 0 0 1px #e5e5e5; background-color: transparent; } .fr-btn--secondary:disabled:hover, a.fr-btn--secondary:not([href]):hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--secondary:disabled:active, a.fr-btn--secondary:not([href]):active { background-color: rgba(0, 0, 0, 0.1); } .fr-btn--tertiary, .fr-btn--account { background-color: transparent; color: #000091; box-shadow: inset 0 0 0 1px #ddd; } .fr-btn--tertiary:hover, .fr-btn--account:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--tertiary:active, .fr-btn--account:active { background-color: rgba(0, 0, 0, 0.1); } .fr-btn--tertiary:disabled, a.fr-btn--tertiary:not([href]), a.fr-btn--account:not([href]), .fr-btn--account:disabled { color: #929292; box-shadow: inset 0 0 0 1px #e5e5e5; background-color: transparent; } .fr-btn--tertiary:disabled:hover, a.fr-btn--tertiary:not([href]):hover, a.fr-btn--account:not([href]):hover, .fr-btn--account:disabled:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--tertiary:disabled:active, a.fr-btn--tertiary:not([href]):active, a.fr-btn--account:not([href]):active, .fr-btn--account:disabled:active { background-color: rgba(0, 0, 0, 0.1); } .fr-btn--tertiary-no-outline, .fr-btn--close, .fr-btn--display, .fr-btn--fullscreen, .fr-btn--tooltip, .fr-btn--briefcase, .fr-btn--team { background-color: transparent; color: #000091; } .fr-btn--tertiary-no-outline:hover, .fr-btn--close:hover, .fr-btn--display:hover, .fr-btn--fullscreen:hover, .fr-btn--tooltip:hover, .fr-btn--briefcase:hover, .fr-btn--team:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--tertiary-no-outline:active, .fr-btn--close:active, .fr-btn--display:active, .fr-btn--fullscreen:active, .fr-btn--tooltip:active, .fr-btn--briefcase:active, .fr-btn--team:active { background-color: rgba(0, 0, 0, 0.1); } .fr-btn--tertiary-no-outline:disabled, a.fr-btn--tertiary-no-outline:not([href]), a.fr-btn--close:not([href]), a.fr-btn--display:not([href]), a.fr-btn--fullscreen:not([href]), a.fr-btn--tooltip:not([href]), a.fr-btn--briefcase:not([href]), a.fr-btn--team:not([href]), .fr-btn--close:disabled, .fr-btn--display:disabled, .fr-btn--fullscreen:disabled, .fr-btn--tooltip:disabled, .fr-btn--briefcase:disabled, .fr-btn--team:disabled { color: #929292; background-color: transparent; } .fr-btn--tertiary-no-outline:disabled:hover, a.fr-btn--tertiary-no-outline:not([href]):hover, a.fr-btn--close:not([href]):hover, a.fr-btn--display:not([href]):hover, a.fr-btn--fullscreen:not([href]):hover, a.fr-btn--tooltip:not([href]):hover, a.fr-btn--briefcase:not([href]):hover, a.fr-btn--team:not([href]):hover, .fr-btn--close:disabled:hover, .fr-btn--display:disabled:hover, .fr-btn--fullscreen:disabled:hover, .fr-btn--tooltip:disabled:hover, .fr-btn--briefcase:disabled:hover, .fr-btn--team:disabled:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--tertiary-no-outline:disabled:active, a.fr-btn--tertiary-no-outline:not([href]):active, a.fr-btn--close:not([href]):active, a.fr-btn--display:not([href]):active, a.fr-btn--fullscreen:not([href]):active, a.fr-btn--tooltip:not([href]):active, a.fr-btn--briefcase:not([href]):active, a.fr-btn--team:not([href]):active, .fr-btn--close:disabled:active, .fr-btn--display:disabled:active, .fr-btn--fullscreen:disabled:active, .fr-btn--tooltip:disabled:active, .fr-btn--briefcase:disabled:active, .fr-btn--team:disabled:active { background-color: rgba(0, 0, 0, 0.1); } } @media print { .fr-btn { background-color: #000091; color: #f5f5fe; } .fr-btn:hover { background-color: #1212ff; } .fr-btn:active { background-color: #2323ff; } .fr-btn:disabled, a.fr-btn:not([href]) { color: #929292; background-color: #e5e5e5; } .fr-btn--secondary { color: #000091; box-shadow: inset 0 0 0 1px #000091; } .fr-btn--secondary:disabled, a.fr-btn--secondary:not([href]) { color: #929292; box-shadow: inset 0 0 0 1px #e5e5e5; } .fr-btn--tertiary, .fr-btn--account { color: #000091; box-shadow: inset 0 0 0 1px #ddd; } .fr-btn--tertiary:disabled, a.fr-btn--tertiary:not([href]), a.fr-btn--account:not([href]), .fr-btn--account:disabled { color: #929292; box-shadow: inset 0 0 0 1px #e5e5e5; } .fr-btn--tertiary-no-outline, .fr-btn--close, .fr-btn--display, .fr-btn--fullscreen, .fr-btn--tooltip, .fr-btn--briefcase, .fr-btn--team { color: #000091; } .fr-btn--tertiary-no-outline:disabled, a.fr-btn--tertiary-no-outline:not([href]), a.fr-btn--close:not([href]), a.fr-btn--display:not([href]), a.fr-btn--fullscreen:not([href]), a.fr-btn--tooltip:not([href]), a.fr-btn--briefcase:not([href]), a.fr-btn--team:not([href]), .fr-btn--close:disabled, .fr-btn--display:disabled, .fr-btn--fullscreen:disabled, .fr-btn--tooltip:disabled, .fr-btn--briefcase:disabled, .fr-btn--team:disabled { color: #929292; } .fr-btn--secondary, .fr-btn--tertiary, .fr-btn--tertiary-no-outline, .fr-btn--close, .fr-btn--display, .fr-btn--fullscreen, .fr-btn--tooltip { background-color: transparent; } } @media print and (-ms-high-contrast: none), print and (-ms-high-contrast: active) { .fr-btn--secondary { background-color: transparent; } .fr-btn--secondary:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--secondary:active { background-color: rgba(0, 0, 0, 0.1); } .fr-btn--secondary:disabled, a.fr-btn--secondary:not([href]) { background-color: transparent; } .fr-btn--secondary:disabled:hover, a.fr-btn--secondary:not([href]):hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--secondary:disabled:active, a.fr-btn--secondary:not([href]):active { background-color: rgba(0, 0, 0, 0.1); } .fr-btn--tertiary, .fr-btn--account { background-color: transparent; } .fr-btn--tertiary:hover, .fr-btn--account:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--tertiary:active, .fr-btn--account:active { background-color: rgba(0, 0, 0, 0.1); } .fr-btn--tertiary:disabled, a.fr-btn--tertiary:not([href]), a.fr-btn--account:not([href]), .fr-btn--account:disabled { background-color: transparent; } .fr-btn--tertiary:disabled:hover, a.fr-btn--tertiary:not([href]):hover, a.fr-btn--account:not([href]):hover, .fr-btn--account:disabled:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--tertiary:disabled:active, a.fr-btn--tertiary:not([href]):active, a.fr-btn--account:not([href]):active, .fr-btn--account:disabled:active { background-color: rgba(0, 0, 0, 0.1); } .fr-btn--tertiary-no-outline, .fr-btn--close, .fr-btn--display, .fr-btn--fullscreen, .fr-btn--tooltip, .fr-btn--briefcase, .fr-btn--team { background-color: transparent; } .fr-btn--tertiary-no-outline:hover, .fr-btn--close:hover, .fr-btn--display:hover, .fr-btn--fullscreen:hover, .fr-btn--tooltip:hover, .fr-btn--briefcase:hover, .fr-btn--team:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--tertiary-no-outline:active, .fr-btn--close:active, .fr-btn--display:active, .fr-btn--fullscreen:active, .fr-btn--tooltip:active, .fr-btn--briefcase:active, .fr-btn--team:active { background-color: rgba(0, 0, 0, 0.1); } .fr-btn--tertiary-no-outline:disabled, a.fr-btn--tertiary-no-outline:not([href]), a.fr-btn--close:not([href]), a.fr-btn--display:not([href]), a.fr-btn--fullscreen:not([href]), a.fr-btn--tooltip:not([href]), a.fr-btn--briefcase:not([href]), a.fr-btn--team:not([href]), .fr-btn--close:disabled, .fr-btn--display:disabled, .fr-btn--fullscreen:disabled, .fr-btn--tooltip:disabled, .fr-btn--briefcase:disabled, .fr-btn--team:disabled { background-color: transparent; } .fr-btn--tertiary-no-outline:disabled:hover, a.fr-btn--tertiary-no-outline:not([href]):hover, a.fr-btn--close:not([href]):hover, a.fr-btn--display:not([href]):hover, a.fr-btn--fullscreen:not([href]):hover, a.fr-btn--tooltip:not([href]):hover, a.fr-btn--briefcase:not([href]):hover, a.fr-btn--team:not([href]):hover, .fr-btn--close:disabled:hover, .fr-btn--display:disabled:hover, .fr-btn--fullscreen:disabled:hover, .fr-btn--tooltip:disabled:hover, .fr-btn--briefcase:disabled:hover, .fr-btn--team:disabled:hover { background-color: rgba(0, 0, 0, 0.05); } .fr-btn--tertiary-no-outline:disabled:active, a.fr-btn--tertiary-no-outline:not([href]):active, a.fr-btn--close:not([href]):active, a.fr-btn--display:not([href]):active, a.fr-btn--fullscreen:not([href]):active, a.fr-btn--tooltip:not([href]):active, a.fr-btn--briefcase:not([href]):active, a.fr-btn--team:not([href]):active, .fr-btn--close:disabled:active, .fr-btn--display:disabled:active, .fr-btn--fullscreen:disabled:active, .fr-btn--tooltip:disabled:active, .fr-btn--briefcase:disabled:active, .fr-btn--team:disabled:active { background-color: rgba(0, 0, 0, 0.1); } }