%icon {
  display: inline-block;
  vertical-align: middle;
}

.icon {
  @extend %icon;
  width: 15px;
  height: 15px;
}

.icon-small {
  @extend %icon;
  width: 10px;
  height: 10px;
}

.icon-medium {
  @extend %icon;
  width: 19px;
  height: 19px;
}

.icon-large {
  @extend %icon;
  width: 24px;
  height: 24px;
}

.icon-xlarge {
  @extend %icon;
  width: 32px;
  height: 32px;
}

.icon-xxlarge {
  @extend %icon;
  width: 48px;
  height: 48px;
}

.icon-xxxlarge {
  @extend %icon;
  width: 64px;
  height: 64px;
}

.icon-right {
  float: right;
}

.icon-default {
  color: $brand-secondary;
}

.icon-primary {
  color: $brand-primary;
}

.icon-success {
  color: $brand-success;
}

.icon-info {
  color: $brand-info;
}

.icon-warning {
  color: $brand-warning;
}

.icon-danger {
  color: $brand-danger;
}

.icon-subtle {
  color: $gray-light;
  &:hover {
    color: $brand-secondary;
  }
}

.serve-opp-listings .icon-check-circle,
.serve-opp-listings .icon-minus-circle {
  top: 3px;
  position: relative;
  left: 2px;
}

svg:focus {
  outline: none;
}

/***************************************************************************************
* Button Icons
***************************************************************************************/

.btn .icon {
  vertical-align: inherit;
}

/***************************************************************************************
* Loading Icons
***************************************************************************************/

// Animations
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading {
  position: relative;
  width: 75px;
  height: 75px;
  background: transparent;
  margin: 0 auto;
  animation: spin 700ms linear infinite;

}

.loading.fullscreen {
  position: relative;
  margin: 100px 0;

}

/***************************************************************************************
* Example Loading Div
***************************************************************************************/

.loading-example {
  min-height: 300px;
}

/***************************************************************************************
* SVG Preview Page
***************************************************************************************/

.snippet-popover {
  pre {
    padding: 0px;
    background: transparent;
    border: none;
    code {
      font-size: 12px;
    }
  }
}