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

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

.#{$grommet-namespace}control-icon {
  display: inline-block;
  width: $inuit-base-spacing-unit;
  height: $inuit-base-spacing-unit;
  // 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: inherit;
    }

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

  #{$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--large {
  width: round($inuit-base-spacing-unit * 2);
  height: round($inuit-base-spacing-unit * 2);
}

.#{$grommet-namespace}control-icon--xlarge {
  width: round($inuit-base-spacing-unit * 6);
  height: round($inuit-base-spacing-unit * 6);
}

.#{$grommet-namespace}control-icon--huge {
  width: round($inuit-base-spacing-unit * 12);
  height: round($inuit-base-spacing-unit * 12);
}

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

.#{$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);
  }
}

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

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

.#{$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--large {
  width: double($inuit-base-spacing-unit);
  height: double($inuit-base-spacing-unit);
}

.#{$grommet-namespace}status-icon--xlarge {
  width: round($inuit-base-spacing-unit * 6);
  height: round($inuit-base-spacing-unit * 6);
}

.#{$grommet-namespace}status-icon--huge {
  width: round($inuit-base-spacing-unit * 12);
  height: round($inuit-base-spacing-unit * 12);
}

.#{$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__detail {
    display: none;
  }
}

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

@include keyframes(rotate) {
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

.#{$grommet-namespace}icon-spinning {
  width: $inuit-base-spacing-unit;
  height: $inuit-base-spacing-unit;
  @include animation('rotate 4s steps(4, end) infinite');
}

.#{$grommet-namespace}icon-spinning--small {
  width: halve($inuit-base-spacing-unit);
  height: halve($inuit-base-spacing-unit);
}

$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;
    }
  }
}