// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

$social-twitter-color: #1DA1F2;
$social-facebook-color: #3B5998;
$social-linkedin-color: #0077B5;

$icon-xsmall-size: halve($inuit-base-spacing-unit) !default;
$icon-small-size: $inuit-base-spacing-unit !default;
$icon-medium-size: round($inuit-base-spacing-unit + halve($inuit-base-spacing-unit)) !default;
$icon-large-size: round($inuit-base-spacing-unit * 2) !default;
$icon-xlarge-size: round($inuit-base-spacing-unit * 6) !default;
$icon-huge-size: round($inuit-base-spacing-unit * 12) !default;

.#{$grommet-namespace}control-icon {
  display: inline-block;
  width: $icon-small-size;
  height: $icon-small-size;
  // vertical-align: middle;
  fill: $icon-color;
  stroke: $icon-color;
  flex: 0 0 auto;

  g {
    fill: inherit;
  }

  &:not([class*="color-index-plain"]) {
    *:not([stroke]) {
      &[fill="none"] {
        stroke-width: 0;
      }
    }

    *[stroke*="#"],
    *[STROKE*="#"] {
      stroke: inherit;
    }

    *[fill*="#"],
    *[FILL*="#"] {
      fill: inherit;
    }

    *[fill-rule] {
      stroke: none;
    }
  }

  #{$dark-background-context} {
    @include icon-color($colored-icon-color);
  }

  #{$light-background-context} {
    @include icon-color($icon-color);
  }

  @include graph-stroke-color();
  @include graph-fill-color();

  @include media-query(lap-and-up) {
    transition: all $base-animation-duration ease-in-out;
  }
}

.#{$grommet-namespace}control-icon__badge {
  circle {
    fill: $icon-badge-background-color;
  }

  text {
    stroke: $icon-badge-text-color;
    fill: $icon-badge-text-color;
  }
}

.#{$grommet-namespace}control-icon--active {
  fill: $active-icon-color;
  stroke: $active-icon-color;
}

.#{$grommet-namespace}control-icon--xsmall {
  width: $icon-xsmall-size;
  height: $icon-xsmall-size;
}

.#{$grommet-namespace}control-icon--medium {
  width: $icon-medium-size;
  height: $icon-medium-size;
}

.#{$grommet-namespace}control-icon--large {
  width: $icon-large-size;
  height: $icon-large-size;
}

.#{$grommet-namespace}control-icon--xlarge {
  width: $icon-xlarge-size;
  height: $icon-xlarge-size;
}

.#{$grommet-namespace}control-icon--huge {
  width: $icon-huge-size;
  height: $icon-huge-size;
}

@include media-query(palm) {
  .#{$grommet-namespace}control-icon--responsive {
    &.#{$grommet-namespace}control-icon--large,
    &.#{$grommet-namespace}control-icon--xlarge,
    &.#{$grommet-namespace}control-icon--huge {
      width: $inuit-base-spacing-unit;
      height: $inuit-base-spacing-unit;
    }
  }
}

.#{$grommet-namespace}status-icon {
  width: $inuit-base-spacing-unit;
  height: $inuit-base-spacing-unit;
  vertical-align: middle;
  flex: 0 0 auto;

  .#{$grommet-namespace}status-icon__base {
    fill: map-get($brand-status-colors, unknown);

    #{$dark-background-context} {
      fill: icon-color($colored-status-color);
    }
  }

  .#{$grommet-namespace}status-icon__detail {
    fill: $background-color;
    stroke: $background-color;
  }

  .#{$grommet-namespace}status-icon__small {
    display: none;
    stroke: map-get($brand-status-colors, unknown);

    #{$dark-background-context} {
      stroke: $colored-status-color;
    }
  }
}

.#{$grommet-namespace}status-icon-label {
  .#{$grommet-namespace}status-icon__base {
    fill: map-get($brand-status-colors, unknown);
  }
}

.#{$grommet-namespace}status-icon-unknown {
  .#{$grommet-namespace}status-icon__detail {
    fill: map-get($brand-status-colors, unknown);
    stroke: map-get($brand-status-colors, unknown);
  }
}

.#{$grommet-namespace}status-icon--xsmall {
  width: $icon-xsmall-size;
  height: $icon-xsmall-size;
}

.#{$grommet-namespace}status-icon--medium {
  width: $icon-medium-size;
  height: $icon-medium-size;
}

.#{$grommet-namespace}status-icon--large {
  width: $icon-large-size;
  height: $icon-large-size;
}

.#{$grommet-namespace}status-icon--xlarge {
  width: $icon-xlarge-size;
  height: $icon-xlarge-size;
}

.#{$grommet-namespace}status-icon--huge {
  width: $icon-huge-size;
  height: $icon-huge-size;
}

.#{$grommet-namespace}status-icon--small {
  width: halve($inuit-base-spacing-unit);
  height: halve($inuit-base-spacing-unit);
  // adjust margin so it aligns with text better
  margin-top: quarter($inuit-base-spacing-unit);
  margin-bottom: quarter($inuit-base-spacing-unit);

  .#{$grommet-namespace}status-icon__base {
    mask: none;
  }

  .#{$grommet-namespace}status-icon__detail,
  .#{$grommet-namespace}status-icon__normal {
    display: none;
  }

  .#{$grommet-namespace}status-icon__small {
    display: block;
  }
}

@each $status, $color in $brand-status-colors {
  .#{$grommet-namespace}status-icon-#{$status} {
    .#{$grommet-namespace}status-icon__base {
      fill: $color;
    }
  }
}

$spinning-dash: round($inuit-base-spacing-unit * 2 * 3.1416);

@include keyframes(drawAndReverse) {
  0% {
    stroke-dashoffset: $spinning-dash;
  }

  100% {
    stroke-dashoffset: - ($spinning-dash - 20); // empirical
  }
}

@include keyframes(fadeOut) {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }

  50% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}

.#{$grommet-namespace}icon-spinning {
  width: $inuit-base-spacing-unit;
  height: $inuit-base-spacing-unit;
  stroke-dasharray: $spinning-dash $spinning-dash;
  stroke-dashoffset: 0;
  transform: rotate(90deg);
  @include animation('drawAndReverse 4s alternate infinite ease-in-out');
  @media all and (-ms-high-contrast: none) {
    transform: rotate(0deg);
    stroke-dashoffset: 50;
    @include animation('fadeOut 3s infinite linear');
  }
}

.#{$grommet-namespace}icon-spinning--xsmall {
  width: $icon-xsmall-size;
  height: $icon-xsmall-size;
}

.#{$grommet-namespace}icon-spinning--medium {
  width: $icon-medium-size;
  height: $icon-medium-size;
}

.#{$grommet-namespace}icon-spinning--large {
  width: $icon-large-size;
  height: $icon-large-size;
}

.#{$grommet-namespace}icon-spinning--xlarge {
  width: $icon-xlarge-size;
  height: $icon-xlarge-size;
}

.#{$grommet-namespace}icon-spinning--huge {
  width: $icon-huge-size;
  height: $icon-huge-size;
}

.#{$grommet-namespace}icon-spinning--xlarge.#{$grommet-namespace}icon-spinning--responsive,
.#{$grommet-namespace}icon-spinning--huge.#{$grommet-namespace}icon-spinning--responsive {
  @include media-query(palm) {
    width: round($inuit-base-spacing-unit * 2);
    height: round($inuit-base-spacing-unit * 2);
  }
}

$logo-size: double($inuit-base-spacing-unit);
$logo-dash-size: round($logo-size * 16);

@include keyframes(draw-logo) {
  0% {
    stroke-dashoffset: $logo-dash-size;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.#{$grommet-namespace}logo-icon {
  width: $logo-size;
  height: $logo-size;

  @include graph-stroke-color();

  @include media-query(lap-and-up) {
    path {
      stroke-dasharray: $logo-dash-size $logo-dash-size;
      stroke-dashoffset: 0;
      @include animation('draw-logo 2.5s linear');
    }
  }
}

.#{$grommet-namespace}logo-icon--small {
  width: halve($logo-size);
  height: halve($logo-size);
}

.#{$grommet-namespace}logo-icon--large {
  width: double($logo-size);
  height: double($logo-size);
}

.#{$grommet-namespace}logo-icon--xlarge {
  width: quadruple($logo-size);
  height: quadruple($logo-size);
}

.#{$grommet-namespace}logo-icon--huge {
  width: round($logo-size * 8);
  height: round($logo-size * 8);
}

.right-left-icon {
  &--left {
    display: none;
  }

  html.rtl & {
    &--left {
      display: inline;
    }

    &--right {
      display: none;
    }
  }
}