/* ==========================================================================
   Config
   ========================================================================== */
$icon-display: inline-flex !default;
$icon-default-color: #678099 !default;
$icon-hover-color: $color-brand-green !default;
$icon-active-color: $color-brand-blue !default;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-icon {
  align-items: center;
  display: $icon-display;
  justify-content: center;
}

.gui-icon-container-12 {
  width: 0.75rem;
  height: 0.75rem;
}

.gui-icon-container-16 {
  width: 1rem;
  height: 1rem;
}

.gui-icon-container-24 {
  width: 1.5rem;
  height: 1.5rem;
}

.gui-icon-container-32 {
  width: 2rem;
  height: 2rem;
}

.gui-icon svg {
  display: block;
}

.gui-icon--default-fill-color path {
  fill: $icon-default-color;
}

.gui-is-active .gui-icon.gui-icon--default-active-color path {
  fill: $icon-active-color;
}

.gui-icon + .gui-icon {
  margin-left: $layout-spacing-base * 0.5;
}

.gui-icon__body {
  display: flex;
  align-items: center;
  background: transparent;
}

.gui-icon__text {
  margin: 0 0 0 $layout-spacing-base * 0.5;

  @include text-overflow-ellipsis;

  &--primary-blue {
    color: $primary-blue;
  }

  &--danger {
    color: $color-text-danger;
  }

  &--green {
    color: $color-brand-green;
  }
}

.gui-icon--hide-text .gui-icon__text {
  display: none;
}

.gui-icon--has-notification {
  position: relative;
  padding-right: $layout-spacing-base * 0.5;
}

.gui-icon__notification {
  font-size: $typo-size-micro;
  color: white;
  background: $primary-blue;
  border-radius: $layout-spacing-base * 0.5;
  display: block;
  min-width: 17px;
  height: $layout-spacing-base;
  padding: 0 $layout-spacing-base * 0.25;
  position: absolute;
  right: -$layout-spacing-base * 0.25;
  top: -7px;
  border: 2px solid white;
  text-align: center;
  line-height: $layout-spacing-base * 0.5 + 6;
}

/* ==========================================================================
   SVG fill / stroke overrides (due to differences with SVGs)
   ========================================================================== */
.gui-icon--upload {
  path {
    stroke: $icon-default-color;
    fill: none;
  }
}

.gui-is-active .gui-icon--upload path {
  fill: none;
  stroke: $icon-active-color;
}

.gui-icon--keyboard rect {
  stroke: $icon-default-color;
}

.gui-is-active .gui-icon--keyboard rect {
  stroke: $icon-active-color;
}

.gui-icon--dark path {
  fill: $neutral-dark;
}

.gui-icon--primary-blue path {
  fill: $primary-blue;
}

.gui-icon.gui-icon--white path {
  fill: white;
}

.gui-icon--danger path {
  fill: $color-text-danger;
}

.gui-icon.gui-icon--green path {
  fill: $color-brand-green;
}

.gui-icon.gui-icon--neutral path {
  @apply text-neutral-primary;
  @apply fill-current;
}

.gui-icon.gui-icon--neutral-20 path {
  @apply text-neutral-20;
  @apply fill-current;
}

.gui-icon.gui-icon--neutral-70 path {
  @apply text-neutral-70;
  @apply fill-current;
}

.gui-icon.gui-icon--purple path {
  @apply text-purple-primary fill-current #{!important};
}

.gui-icon.gui-icon--warning path {
  @apply fill-current;
}

button:active .gui-icon--blue-on-button-parent-active path {
  fill: $primary-blue;
}

button:active .gui-icon--red-on-button-parent-active path {
  fill: $primary-red;
}