[data-component-id="usfq_theme:icon"] {
  display: inline-flex;
  line-height: 1;
  color: currentColor;
  transition: transform 0.3s ease-in-out;

  svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
  }

  svg path {
    fill: currentColor;
  }

  svg.chevron path {
    stroke: currentColor;
    fill: transparent;
  }

  svg.location path {
    fill: transparent;
  }

  &.icon--color-dark {
    color: var(--dark);
  }

  &.icon--color-black {
    color: var(--secondary);
  }

  &.icon--color-white {
    color: var(--white);
  }

  &.icon--color-red {
    color: var(--primary);
  }

  &.icon--size-small {
    font-size: 20px;
  }

  &.icon--size-large {
    font-size: 35px;
  }

  &.icon--dir-up {
    transform: rotate(0deg);
  }

  &.icon--dir-down {
    transform: rotate(90deg);
  }

  &.icon--dir-up.chevron,
  &.icon--dir-up .chevron {
    transform: rotate(270deg);
  }

  &.icon--dir-down.chevron,
  &.icon--dir-down .chevron {
    transform: rotate(-90deg);
  }

  /* Dos formas de llamar al icono conviven en el tema: unas plantillas le
     pasan class: 'chevron' al propio <span> (los carruseles) y otras no, con
     lo que la clase queda solo en el <svg> de dentro. Sin el :not(), cuando el
     span la lleva ambas reglas aplican -- span y svg rotan 180deg cada uno,
     360deg en total, y la flecha "anterior" acaba apuntando a la derecha. */
  &.icon--dir-left.chevron,
  &.icon--dir-left:not(.chevron) .chevron {
    transform: rotate(180deg);
  }

  &.icon.is-rotated {
    transform: rotate(90deg);
  }
}