@codegouvfr/react-dsfr/dsfr/component/tag/tag.legacy.css

French State Design System React integration library

/*!
 * DSFR v1.13.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
 */
@media (min-width: 36em) {
  /*! media sm */
}
@media (min-width: 48em) {
  /*! media md */
}
@media (min-width: 62em) {
  /*! media lg */
}
@media (min-width: 78em) {
  /*! media xl */
}
@media screen and (min-width: 0\0) and (min-resolution: 72dpi) {
  .fr-tag {
    text-decoration: none;
    color: #161616;
    background-color: #eee;
  }

  .fr-tag::before,
  .fr-tag::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
  }

  .fr-tag.fr-tag--sm::before {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 0.75rem;
    height: 0.75rem;
  }

  button.fr-tag[aria-pressed=true],
  input[type=button].fr-tag[aria-pressed=true] {
    background-size: 100% 100%, 100% 100%;
  }

  button.fr-tag[aria-pressed=true]::after,
  input[type=button].fr-tag[aria-pressed=true]::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("../../icons/system/checkbox-circle-line.svg");
    width: 1rem;
    height: 1rem;
    color: #000091;
  }

  button.fr-tag[aria-pressed=true].fr-tag--sm::after,
  input[type=button].fr-tag[aria-pressed=true].fr-tag--sm::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 0.75rem;
    height: 0.75rem;
  }

  button.fr-tag.fr-tag--dismiss::after,
  input[type=button].fr-tag.fr-tag--dismiss::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("../../icons/system/close-line.svg");
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    margin-left: 0.625rem;
  }

  button.fr-tag.fr-tag--dismiss.fr-tag--sm::after,
  input[type=button].fr-tag.fr-tag--dismiss.fr-tag--sm::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 0.75rem;
    height: 0.75rem;
    background-color: currentColor;
    margin-left: 0.5rem;
  }

  ul.fr-tags-group {
    list-style-type: none;
  }

  ol.fr-tags-group {
    list-style-type: none;
  }

  ul.fr-tags-group,
  ol.fr-tags-group {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .fr-tags-group--sm::before,
  .fr-tags-group--sm::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
  }

  .fr-tags-group--sm a.fr-tag.fr-tag--dismiss::after,
  .fr-tags-group--sm button.fr-tag.fr-tag--dismiss::after,
  .fr-tags-group--sm input[type=button].fr-tag.fr-tag--dismiss::after,
  .fr-tags-group--sm input[type=image].fr-tag.fr-tag--dismiss::after,
  .fr-tags-group--sm input[type=reset].fr-tag.fr-tag--dismiss::after,
  .fr-tags-group--sm input[type=submit].fr-tag.fr-tag--dismiss::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 0.75rem;
    height: 0.75rem;
  }

  .fr-tags-group--sm a.fr-tag[aria-pressed=true]::after,
  .fr-tags-group--sm button.fr-tag[aria-pressed=true]::after,
  .fr-tags-group--sm input[type=button].fr-tag[aria-pressed=true]::after,
  .fr-tags-group--sm input[type=image].fr-tag[aria-pressed=true]::after,
  .fr-tags-group--sm input[type=reset].fr-tag[aria-pressed=true]::after,
  .fr-tags-group--sm input[type=submit].fr-tag[aria-pressed=true]::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 0.75rem;
    height: 0.75rem;
    background-color: transparent !important;
  }

  .fr-tag[aria-pressed=false] {
    color: #000091;
    background-color: #e3e3fd;
  }

  .fr-tag[aria-pressed=false]:hover {
    background-color: #c1c1fb;
  }

  .fr-tag[aria-pressed=false]:active {
    background-color: #adadf9;
  }

  .fr-tag.fr-tag--dismiss {
    color: #f5f5fe;
    background-color: #000091;
  }

  .fr-tag.fr-tag--dismiss:hover {
    background-color: #1212ff;
  }

  .fr-tag.fr-tag--dismiss:active {
    background-color: #2323ff;
  }

  a.fr-tag,
  button.fr-tag,
  input[type=button].fr-tag,
  input[type=image].fr-tag,
  input[type=reset].fr-tag,
  input[type=submit].fr-tag {
    color: #000091;
    background-color: #e3e3fd;
  }

  a.fr-tag:hover,
  button.fr-tag:hover,
  input[type=button].fr-tag:hover,
  input[type=image].fr-tag:hover,
  input[type=reset].fr-tag:hover,
  input[type=submit].fr-tag:hover {
    background-color: #c1c1fb;
  }

  a.fr-tag:active,
  button.fr-tag:active,
  input[type=button].fr-tag:active,
  input[type=image].fr-tag:active,
  input[type=reset].fr-tag:active,
  input[type=submit].fr-tag:active {
    background-color: #adadf9;
  }

  a.fr-tag--green-tilleul-verveine,
  button.fr-tag--green-tilleul-verveine,
  input[type=button].fr-tag--green-tilleul-verveine,
  input[type=image].fr-tag--green-tilleul-verveine,
  input[type=reset].fr-tag--green-tilleul-verveine,
  input[type=submit].fr-tag--green-tilleul-verveine {
    color: #66673d;
    background-color: #fbe769;
  }

  a.fr-tag--green-tilleul-verveine:hover,
  button.fr-tag--green-tilleul-verveine:hover,
  input[type=button].fr-tag--green-tilleul-verveine:hover,
  input[type=image].fr-tag--green-tilleul-verveine:hover,
  input[type=reset].fr-tag--green-tilleul-verveine:hover,
  input[type=submit].fr-tag--green-tilleul-verveine:hover {
    background-color: #d7c655;
  }

  a.fr-tag--green-tilleul-verveine:active,
  button.fr-tag--green-tilleul-verveine:active,
  input[type=button].fr-tag--green-tilleul-verveine:active,
  input[type=image].fr-tag--green-tilleul-verveine:active,
  input[type=reset].fr-tag--green-tilleul-verveine:active,
  input[type=submit].fr-tag--green-tilleul-verveine:active {
    background-color: #c2b24c;
  }

  a.fr-tag--green-bourgeon,
  button.fr-tag--green-bourgeon,
  input[type=button].fr-tag--green-bourgeon,
  input[type=image].fr-tag--green-bourgeon,
  input[type=reset].fr-tag--green-bourgeon,
  input[type=submit].fr-tag--green-bourgeon {
    color: #447049;
    background-color: #a9fb68;
  }

  a.fr-tag--green-bourgeon:hover,
  button.fr-tag--green-bourgeon:hover,
  input[type=button].fr-tag--green-bourgeon:hover,
  input[type=image].fr-tag--green-bourgeon:hover,
  input[type=reset].fr-tag--green-bourgeon:hover,
  input[type=submit].fr-tag--green-bourgeon:hover {
    background-color: #8ed654;
  }

  a.fr-tag--green-bourgeon:active,
  button.fr-tag--green-bourgeon:active,
  input[type=button].fr-tag--green-bourgeon:active,
  input[type=image].fr-tag--green-bourgeon:active,
  input[type=reset].fr-tag--green-bourgeon:active,
  input[type=submit].fr-tag--green-bourgeon:active {
    background-color: #7fc04b;
  }

  a.fr-tag--green-emeraude,
  button.fr-tag--green-emeraude,
  input[type=button].fr-tag--green-emeraude,
  input[type=image].fr-tag--green-emeraude,
  input[type=reset].fr-tag--green-emeraude,
  input[type=submit].fr-tag--green-emeraude {
    color: #297254;
    background-color: #9ef9be;
  }

  a.fr-tag--green-emeraude:hover,
  button.fr-tag--green-emeraude:hover,
  input[type=button].fr-tag--green-emeraude:hover,
  input[type=image].fr-tag--green-emeraude:hover,
  input[type=reset].fr-tag--green-emeraude:hover,
  input[type=submit].fr-tag--green-emeraude:hover {
    background-color: #69df97;
  }

  a.fr-tag--green-emeraude:active,
  button.fr-tag--green-emeraude:active,
  input[type=button].fr-tag--green-emeraude:active,
  input[type=image].fr-tag--green-emeraude:active,
  input[type=reset].fr-tag--green-emeraude:active,
  input[type=submit].fr-tag--green-emeraude:active {
    background-color: #5ec988;
  }

  a.fr-tag--green-menthe,
  button.fr-tag--green-menthe,
  input[type=button].fr-tag--green-menthe,
  input[type=image].fr-tag--green-menthe,
  input[type=reset].fr-tag--green-menthe,
  input[type=submit].fr-tag--green-menthe {
    color: #37635f;
    background-color: #8bf8e7;
  }

  a.fr-tag--green-menthe:hover,
  button.fr-tag--green-menthe:hover,
  input[type=button].fr-tag--green-menthe:hover,
  input[type=image].fr-tag--green-menthe:hover,
  input[type=reset].fr-tag--green-menthe:hover,
  input[type=submit].fr-tag--green-menthe:hover {
    background-color: #6ed5c5;
  }

  a.fr-tag--green-menthe:active,
  button.fr-tag--green-menthe:active,
  input[type=button].fr-tag--green-menthe:active,
  input[type=image].fr-tag--green-menthe:active,
  input[type=reset].fr-tag--green-menthe:active,
  input[type=submit].fr-tag--green-menthe:active {
    background-color: #62bfb1;
  }

  a.fr-tag--green-archipel,
  button.fr-tag--green-archipel,
  input[type=button].fr-tag--green-archipel,
  input[type=image].fr-tag--green-archipel,
  input[type=reset].fr-tag--green-archipel,
  input[type=submit].fr-tag--green-archipel {
    color: #006a6f;
    background-color: #a6f2fa;
  }

  a.fr-tag--green-archipel:hover,
  button.fr-tag--green-archipel:hover,
  input[type=button].fr-tag--green-archipel:hover,
  input[type=image].fr-tag--green-archipel:hover,
  input[type=reset].fr-tag--green-archipel:hover,
  input[type=submit].fr-tag--green-archipel:hover {
    background-color: #62dbe5;
  }

  a.fr-tag--green-archipel:active,
  button.fr-tag--green-archipel:active,
  input[type=button].fr-tag--green-archipel:active,
  input[type=image].fr-tag--green-archipel:active,
  input[type=reset].fr-tag--green-archipel:active,
  input[type=submit].fr-tag--green-archipel:active {
    background-color: #58c5cf;
  }

  a.fr-tag--blue-ecume,
  button.fr-tag--blue-ecume,
  input[type=button].fr-tag--blue-ecume,
  input[type=image].fr-tag--blue-ecume,
  input[type=reset].fr-tag--blue-ecume,
  input[type=submit].fr-tag--blue-ecume {
    color: #2f4077;
    background-color: #dee5fd;
  }

  a.fr-tag--blue-ecume:hover,
  button.fr-tag--blue-ecume:hover,
  input[type=button].fr-tag--blue-ecume:hover,
  input[type=image].fr-tag--blue-ecume:hover,
  input[type=reset].fr-tag--blue-ecume:hover,
  input[type=submit].fr-tag--blue-ecume:hover {
    background-color: #b4c5fb;
  }

  a.fr-tag--blue-ecume:active,
  button.fr-tag--blue-ecume:active,
  input[type=button].fr-tag--blue-ecume:active,
  input[type=image].fr-tag--blue-ecume:active,
  input[type=reset].fr-tag--blue-ecume:active,
  input[type=submit].fr-tag--blue-ecume:active {
    background-color: #99b3f9;
  }

  a.fr-tag--blue-cumulus,
  button.fr-tag--blue-cumulus,
  input[type=button].fr-tag--blue-cumulus,
  input[type=image].fr-tag--blue-cumulus,
  input[type=reset].fr-tag--blue-cumulus,
  input[type=submit].fr-tag--blue-cumulus {
    color: #3558a2;
    background-color: #dae6fd;
  }

  a.fr-tag--blue-cumulus:hover,
  button.fr-tag--blue-cumulus:hover,
  input[type=button].fr-tag--blue-cumulus:hover,
  input[type=image].fr-tag--blue-cumulus:hover,
  input[type=reset].fr-tag--blue-cumulus:hover,
  input[type=submit].fr-tag--blue-cumulus:hover {
    background-color: #a9c8fb;
  }

  a.fr-tag--blue-cumulus:active,
  button.fr-tag--blue-cumulus:active,
  input[type=button].fr-tag--blue-cumulus:active,
  input[type=image].fr-tag--blue-cumulus:active,
  input[type=reset].fr-tag--blue-cumulus:active,
  input[type=submit].fr-tag--blue-cumulus:active {
    background-color: #8ab8f9;
  }

  a.fr-tag--purple-glycine,
  button.fr-tag--purple-glycine,
  input[type=button].fr-tag--purple-glycine,
  input[type=image].fr-tag--purple-glycine,
  input[type=reset].fr-tag--purple-glycine,
  input[type=submit].fr-tag--purple-glycine {
    color: #6e445a;
    background-color: #fddbfa;
  }

  a.fr-tag--purple-glycine:hover,
  button.fr-tag--purple-glycine:hover,
  input[type=button].fr-tag--purple-glycine:hover,
  input[type=image].fr-tag--purple-glycine:hover,
  input[type=reset].fr-tag--purple-glycine:hover,
  input[type=submit].fr-tag--purple-glycine:hover {
    background-color: #fbaff5;
  }

  a.fr-tag--purple-glycine:active,
  button.fr-tag--purple-glycine:active,
  input[type=button].fr-tag--purple-glycine:active,
  input[type=image].fr-tag--purple-glycine:active,
  input[type=reset].fr-tag--purple-glycine:active,
  input[type=submit].fr-tag--purple-glycine:active {
    background-color: #fa96f2;
  }

  a.fr-tag--pink-macaron,
  button.fr-tag--pink-macaron,
  input[type=button].fr-tag--pink-macaron,
  input[type=image].fr-tag--pink-macaron,
  input[type=reset].fr-tag--pink-macaron,
  input[type=submit].fr-tag--pink-macaron {
    color: #8d533e;
    background-color: #fddfda;
  }

  a.fr-tag--pink-macaron:hover,
  button.fr-tag--pink-macaron:hover,
  input[type=button].fr-tag--pink-macaron:hover,
  input[type=image].fr-tag--pink-macaron:hover,
  input[type=reset].fr-tag--pink-macaron:hover,
  input[type=submit].fr-tag--pink-macaron:hover {
    background-color: #fbb8ab;
  }

  a.fr-tag--pink-macaron:active,
  button.fr-tag--pink-macaron:active,
  input[type=button].fr-tag--pink-macaron:active,
  input[type=image].fr-tag--pink-macaron:active,
  input[type=reset].fr-tag--pink-macaron:active,
  input[type=submit].fr-tag--pink-macaron:active {
    background-color: #faa18d;
  }

  a.fr-tag--pink-tuile,
  button.fr-tag--pink-tuile,
  input[type=button].fr-tag--pink-tuile,
  input[type=image].fr-tag--pink-tuile,
  input[type=reset].fr-tag--pink-tuile,
  input[type=submit].fr-tag--pink-tuile {
    color: #a94645;
    background-color: #fddfdb;
  }

  a.fr-tag--pink-tuile:hover,
  button.fr-tag--pink-tuile:hover,
  input[type=button].fr-tag--pink-tuile:hover,
  input[type=image].fr-tag--pink-tuile:hover,
  input[type=reset].fr-tag--pink-tuile:hover,
  input[type=submit].fr-tag--pink-tuile:hover {
    background-color: #fbb8ad;
  }

  a.fr-tag--pink-tuile:active,
  button.fr-tag--pink-tuile:active,
  input[type=button].fr-tag--pink-tuile:active,
  input[type=image].fr-tag--pink-tuile:active,
  input[type=reset].fr-tag--pink-tuile:active,
  input[type=submit].fr-tag--pink-tuile:active {
    background-color: #faa191;
  }

  a.fr-tag--yellow-tournesol,
  button.fr-tag--yellow-tournesol,
  input[type=button].fr-tag--yellow-tournesol,
  input[type=image].fr-tag--yellow-tournesol,
  input[type=reset].fr-tag--yellow-tournesol,
  input[type=submit].fr-tag--yellow-tournesol {
    color: #716043;
    background-color: #fde39c;
  }

  a.fr-tag--yellow-tournesol:hover,
  button.fr-tag--yellow-tournesol:hover,
  input[type=button].fr-tag--yellow-tournesol:hover,
  input[type=image].fr-tag--yellow-tournesol:hover,
  input[type=reset].fr-tag--yellow-tournesol:hover,
  input[type=submit].fr-tag--yellow-tournesol:hover {
    background-color: #e9c53b;
  }

  a.fr-tag--yellow-tournesol:active,
  button.fr-tag--yellow-tournesol:active,
  input[type=button].fr-tag--yellow-tournesol:active,
  input[type=image].fr-tag--yellow-tournesol:active,
  input[type=reset].fr-tag--yellow-tournesol:active,
  input[type=submit].fr-tag--yellow-tournesol:active {
    background-color: #d3b235;
  }

  a.fr-tag--yellow-moutarde,
  button.fr-tag--yellow-moutarde,
  input[type=button].fr-tag--yellow-moutarde,
  input[type=image].fr-tag--yellow-moutarde,
  input[type=reset].fr-tag--yellow-moutarde,
  input[type=submit].fr-tag--yellow-moutarde {
    color: #695240;
    background-color: #fde2b5;
  }

  a.fr-tag--yellow-moutarde:hover,
  button.fr-tag--yellow-moutarde:hover,
  input[type=button].fr-tag--yellow-moutarde:hover,
  input[type=image].fr-tag--yellow-moutarde:hover,
  input[type=reset].fr-tag--yellow-moutarde:hover,
  input[type=submit].fr-tag--yellow-moutarde:hover {
    background-color: #f6c43c;
  }

  a.fr-tag--yellow-moutarde:active,
  button.fr-tag--yellow-moutarde:active,
  input[type=button].fr-tag--yellow-moutarde:active,
  input[type=image].fr-tag--yellow-moutarde:active,
  input[type=reset].fr-tag--yellow-moutarde:active,
  input[type=submit].fr-tag--yellow-moutarde:active {
    background-color: #dfb135;
  }

  a.fr-tag--orange-terre-battue,
  button.fr-tag--orange-terre-battue,
  input[type=button].fr-tag--orange-terre-battue,
  input[type=image].fr-tag--orange-terre-battue,
  input[type=reset].fr-tag--orange-terre-battue,
  input[type=submit].fr-tag--orange-terre-battue {
    color: #755348;
    background-color: #fddfd8;
  }

  a.fr-tag--orange-terre-battue:hover,
  button.fr-tag--orange-terre-battue:hover,
  input[type=button].fr-tag--orange-terre-battue:hover,
  input[type=image].fr-tag--orange-terre-battue:hover,
  input[type=reset].fr-tag--orange-terre-battue:hover,
  input[type=submit].fr-tag--orange-terre-battue:hover {
    background-color: #fbb8a5;
  }

  a.fr-tag--orange-terre-battue:active,
  button.fr-tag--orange-terre-battue:active,
  input[type=button].fr-tag--orange-terre-battue:active,
  input[type=image].fr-tag--orange-terre-battue:active,
  input[type=reset].fr-tag--orange-terre-battue:active,
  input[type=submit].fr-tag--orange-terre-battue:active {
    background-color: #faa184;
  }

  a.fr-tag--brown-cafe-creme,
  button.fr-tag--brown-cafe-creme,
  input[type=button].fr-tag--brown-cafe-creme,
  input[type=image].fr-tag--brown-cafe-creme,
  input[type=reset].fr-tag--brown-cafe-creme,
  input[type=submit].fr-tag--brown-cafe-creme {
    color: #685c48;
    background-color: #f4e3c7;
  }

  a.fr-tag--brown-cafe-creme:hover,
  button.fr-tag--brown-cafe-creme:hover,
  input[type=button].fr-tag--brown-cafe-creme:hover,
  input[type=image].fr-tag--brown-cafe-creme:hover,
  input[type=reset].fr-tag--brown-cafe-creme:hover,
  input[type=submit].fr-tag--brown-cafe-creme:hover {
    background-color: #e1c386;
  }

  a.fr-tag--brown-cafe-creme:active,
  button.fr-tag--brown-cafe-creme:active,
  input[type=button].fr-tag--brown-cafe-creme:active,
  input[type=image].fr-tag--brown-cafe-creme:active,
  input[type=reset].fr-tag--brown-cafe-creme:active,
  input[type=submit].fr-tag--brown-cafe-creme:active {
    background-color: #ccb078;
  }

  a.fr-tag--brown-caramel,
  button.fr-tag--brown-caramel,
  input[type=button].fr-tag--brown-caramel,
  input[type=image].fr-tag--brown-caramel,
  input[type=reset].fr-tag--brown-caramel,
  input[type=submit].fr-tag--brown-caramel {
    color: #845d48;
    background-color: #f3e2d9;
  }

  a.fr-tag--brown-caramel:hover,
  button.fr-tag--brown-caramel:hover,
  input[type=button].fr-tag--brown-caramel:hover,
  input[type=image].fr-tag--brown-caramel:hover,
  input[type=reset].fr-tag--brown-caramel:hover,
  input[type=submit].fr-tag--brown-caramel:hover {
    background-color: #e7bea6;
  }

  a.fr-tag--brown-caramel:active,
  button.fr-tag--brown-caramel:active,
  input[type=button].fr-tag--brown-caramel:active,
  input[type=image].fr-tag--brown-caramel:active,
  input[type=reset].fr-tag--brown-caramel:active,
  input[type=submit].fr-tag--brown-caramel:active {
    background-color: #e1a982;
  }

  a.fr-tag--brown-opera,
  button.fr-tag--brown-opera,
  input[type=button].fr-tag--brown-opera,
  input[type=image].fr-tag--brown-opera,
  input[type=reset].fr-tag--brown-opera,
  input[type=submit].fr-tag--brown-opera {
    color: #745b47;
    background-color: #f3e2d7;
  }

  a.fr-tag--brown-opera:hover,
  button.fr-tag--brown-opera:hover,
  input[type=button].fr-tag--brown-opera:hover,
  input[type=image].fr-tag--brown-opera:hover,
  input[type=reset].fr-tag--brown-opera:hover,
  input[type=submit].fr-tag--brown-opera:hover {
    background-color: #e7bfa0;
  }

  a.fr-tag--brown-opera:active,
  button.fr-tag--brown-opera:active,
  input[type=button].fr-tag--brown-opera:active,
  input[type=image].fr-tag--brown-opera:active,
  input[type=reset].fr-tag--brown-opera:active,
  input[type=submit].fr-tag--brown-opera:active {
    background-color: #deaa7e;
  }

  a.fr-tag--beige-gris-galet,
  button.fr-tag--beige-gris-galet,
  input[type=button].fr-tag--beige-gris-galet,
  input[type=image].fr-tag--beige-gris-galet,
  input[type=reset].fr-tag--beige-gris-galet,
  input[type=submit].fr-tag--beige-gris-galet {
    color: #6a6156;
    background-color: #eee4d9;
  }

  a.fr-tag--beige-gris-galet:hover,
  button.fr-tag--beige-gris-galet:hover,
  input[type=button].fr-tag--beige-gris-galet:hover,
  input[type=image].fr-tag--beige-gris-galet:hover,
  input[type=reset].fr-tag--beige-gris-galet:hover,
  input[type=submit].fr-tag--beige-gris-galet:hover {
    background-color: #dbc3a4;
  }

  a.fr-tag--beige-gris-galet:active,
  button.fr-tag--beige-gris-galet:active,
  input[type=button].fr-tag--beige-gris-galet:active,
  input[type=image].fr-tag--beige-gris-galet:active,
  input[type=reset].fr-tag--beige-gris-galet:active,
  input[type=submit].fr-tag--beige-gris-galet:active {
    background-color: #c6b094;
  }

  button.fr-tag[aria-pressed=true]:not(:disabled),
  input[type=button].fr-tag[aria-pressed=true]:not(:disabled) {
    background-color: transparent;
    color: #f5f5fe;
    background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, #000091 0.625rem);
  }

  button.fr-tag[aria-pressed=true]:not(:disabled):hover,
  input[type=button].fr-tag[aria-pressed=true]:not(:disabled):hover {
    background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, #1212ff 0.625rem);
  }

  button.fr-tag[aria-pressed=true]:not(:disabled):active,
  input[type=button].fr-tag[aria-pressed=true]:not(:disabled):active {
    background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, #2323ff 0.625rem);
  }

  button.fr-tag[aria-pressed=true]:disabled,
  input[type=button].fr-tag[aria-pressed=true]:disabled {
    background-color: transparent;
    background-image: radial-gradient(circle at 100% 0.25rem, transparent 0.578125rem, #e5e5e5 0.625rem);
  }

  button.fr-tag[aria-pressed=true]:disabled:hover,
  input[type=button].fr-tag[aria-pressed=true]:disabled:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  button.fr-tag[aria-pressed=true]:disabled:active,
  input[type=button].fr-tag[aria-pressed=true]:disabled:active {
    background-color: rgba(0, 0, 0, 0.1);
  }

  button.fr-tag[aria-pressed=true]:disabled::after,
  input[type=button].fr-tag[aria-pressed=true]:disabled::after {
    color: #929292;
  }

  button.fr-tag[aria-pressed=true].fr-tag--sm,
  input[type=button].fr-tag[aria-pressed=true].fr-tag--sm {
    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #000091 0.5rem);
  }

  button.fr-tag[aria-pressed=true].fr-tag--sm:hover,
  input[type=button].fr-tag[aria-pressed=true].fr-tag--sm:hover {
    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #1212ff 0.5rem);
  }

  button.fr-tag[aria-pressed=true].fr-tag--sm:active,
  input[type=button].fr-tag[aria-pressed=true].fr-tag--sm:active {
    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #2323ff 0.5rem);
  }

  button.fr-tag[aria-pressed=true].fr-tag--sm:disabled,
  input[type=button].fr-tag[aria-pressed=true].fr-tag--sm:disabled {
    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #e5e5e5 0.5rem);
  }

  button.fr-tag:disabled,
  input[type=button].fr-tag:disabled {
    color: #929292;
    background-color: #e5e5e5;
  }

  a:not([href]).fr-tag {
    color: #929292;
    background-color: #e5e5e5;
  }

  .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed=true],
  .fr-tags-group.fr-tags-group--sm input[type=button].fr-tag[aria-pressed=true] {
    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #000091 0.5rem);
  }

  .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed=true]:hover,
  .fr-tags-group.fr-tags-group--sm input[type=button].fr-tag[aria-pressed=true]:hover {
    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #1212ff 0.5rem);
  }

  .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed=true]:active,
  .fr-tags-group.fr-tags-group--sm input[type=button].fr-tag[aria-pressed=true]:active {
    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #2323ff 0.5rem);
  }

  .fr-tags-group.fr-tags-group--sm button.fr-tag[aria-pressed=true]:disabled,
  .fr-tags-group.fr-tags-group--sm input[type=button].fr-tag[aria-pressed=true]:disabled {
    background-image: radial-gradient(circle at 100% 0.1875rem, transparent 0.4475rem, #e5e5e5 0.5rem);
  }
}