/*

      <button class="has-icon" >
         <svg />
         <span> Button Label </span>
      </button>

       <a class="has-icon" href="">
         <svg />
         <span> Button Label </span>
      </a>

  *---------------- O R -------------------*

      <button class="has-icon" >
         <img class="icon" src="" />
         <span> Button Label </span>
      </button>

      <a class="has-icon" href="">
         <img class="icon" src="" />
         <span> Button Label </span>
      </a>

*/

.has-icon {
  align-items: center;

  width: fit-content;
  padding: .5rem 1rem .5rem .5rem;
  border: .5px solid var(--contrast);
  border-radius: .25rem;
  box-shadow: none;
  /* Move to button generic */
  text-transform: capitalize;
  font-weight: 300;
  letter-spacing: .2px;
  column-gap: .5rem;

  background-color: inherit;
}

.has-icon :is(svg,.icon) {
  order: -1; /* corrects for any out of order */

  width: 18px;
  height: 18px;
}

.has-icon svg {
  stroke-width: 1.5;
}

.has-icon:focus {
  outline: 2px solid var(--color-6);
}

.has-icon:hover {
  background: var(--compare);
  border-color: var(--color-6);
  box-shadow: var(--concave-sm);
}


.has-icon.caution {
  background: var(--visitor-lt);
  border-color: var(--visitor-med);
}

.has-icon.success {
  background: var(--business);
  color: var(--lightest);
  border-radius: var(--circle);
  border-color: var(--business-med);
}

.has-icon.success:hover {
  cursor: default;
  box-shadow: none;
}

@media screen and (max-width: 600px) {
  .has-icon {
    margin: .25rem 0;
  }
}