@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.icon {
  height: 1.563rem;
  width: 1.563rem;
  vertical-align: middle;

  &.icon--tight {
    width: auto;
  }

  &.icon--spinning {
    animation: rotate 1s infinite linear;
  }
}

.icon--2 {
  height: 3.125rem;
  width: 3.125rem;
  vertical-align: middle;
}

.icon--3 { 
  height: 4.688rem;
  width: 4.688rem;
  vertical-align: middle;
}

.icon--4 {
  height: 6.25rem;
  width: 6.25rem;
  vertical-align: middle;
}

.icon--export {
  height: 63px;
  width: 48px;
  vertical-align: middle;
}

.count-icon {
  .count-icon--count {
    font-size: var(--font-size--s);
  }

  .count-icon--icon {
    display: inline-block;
  }

  &.has-count {
    .count-icon--icon {
      margin-left: -0.25em;
      margin-right: -0.5em;
    }
  }
}

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

.icon--rotate--180 {
  transform: rotate(180deg);
}

.icon--rotate--270 {
  transform: rotate(270deg);
}