/* =========================
   ICON

How to use:
  <button class="control">
    <span
      class="icon rotate-90"
      data-icon="chevron"
      aria-hidden="true">
    </span>
  </button>

  <button class="control">
    <span
      class="icon rotate-45"
      data-icon="arrow"
      aria-hidden="true">
    </span>
  </button>

  <a
    href="#top"
    class="control control--fixed is-bottom-right">

    <span
      class="icon rotate-0"
      data-icon="arrow"
      aria-hidden="true">
    </span>

    <span class="sr-only">
      Back to top
    </span>
  </a>

Also available:
  <span class="icon rotate-135" data-icon="arrow"></span>
========================= */

.icon {
  width: 24px;
  height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.2s ease;
}

.icon svg {
  width: 100%;
  height: 100%;
  transform-box: fill-box;
  transform-origin: center;
}

/* =========================
   CONTROL
========================= */

.control {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border: 0;
  border-radius: 12px;

  background-color: rgba(35, 205, 205, 0.3);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


/* =========================
   GLOBAL ROTATION UTILITIES
========================= */

.rotate-0   { transform: rotate(0deg); }
.rotate-15  { transform: rotate(15deg); }
.rotate-30  { transform: rotate(30deg); }
.rotate-45  { transform: rotate(45deg); }
.rotate-60  { transform: rotate(60deg); }
.rotate-75  { transform: rotate(75deg); }
.rotate-90  { transform: rotate(90deg); }

/* continue */

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

/* etc */

.rotate-345 { transform: rotate(345deg); }