.icon-wrapper {
  position: relative;
  display: inline-block;
  width: rem-calc(72px);
  height: rem-calc(72px);
  display: inline-block;

  .img,
  svg {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.inline {
  vertical-align: middle;
  // This will get the icons to actually be centered inline.
  transform: translateY(-0.27ex);
}

// TODO: This component shouldn't be positioning itself like this.
.left {
  margin-right: rem-calc(12);
}

.right {
  margin-left: rem-calc(12);
}

.clickable {
  cursor: pointer;
}

/* stylelint-disable */
:global(.icon-hover-example) {
  svg path {
    fill: color('secondary-1');
    transition: all .3s;
  }

  &:hover {
    transform: rotate(90deg);
    border-right: 4px solid color('primary-1');
    transition: all .3s;

    svg path {
      fill: color('primary-1');
    }
  }
}

:global(.example-pg-icon) {
  svg path {
    transition: all .3s;
  }

  &:hover {
    transform: scale(-1, 1);
    transition: all .3s;

    svg path {
      fill: color('primary-1');
    }
  }
}