/// _components.iconic.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2; fill-column: 80 -*-

$pf-iconic-size--tiny:     $inuit-global-line-height;
$pf-iconic-size--small:    $inuit-global-line-height * 3/2;
$pf-iconic-size--large:    $inuit-global-line-height * 7/3;

.c-iconic {
  width: 100%; // fill container

  use {
    fill: $pf-base-text-color;
  }  

  &--primary use {
    fill: $pf-color-primary;
  }

  &--secondary use {
    fill: $pf-color-secondary;
  }
}


.c-iconic {
  &--tiny {
    height: $pf-iconic-size--tiny;
    width: $pf-iconic-size--tiny;
  }

  &--small {
    height: $pf-iconic-size--small;
    width: $pf-iconic-size--small;
  }

  &--large {
    width: $pf-iconic-size--large;

    @include mq($until: mobile) {
      width: $pf-iconic-size--small;
    }
  }
}

.c-iconic__hide {
  display: block;
  position: absolute;
  left: -100%;
  height: 0;
  width: 0;
  overflow: hidden;
}
