@import "../style/colors";

$iconXSmSize: 8px;
$iconSmSize: 16px;
$iconMdSize: 24px;
$iconDefaultSize: 32px; //large size
$iconXLargeSize: 40px;
$iconXxLargeSize: 64px;
$iconCardSize: 100px;
$iconCardMaskSize: 95px;
$iconHoverOpacity: 0.6;
$iconDisabledOpacity: 0.15;
$iconDefaultColor: $midnight-4;

.la-icon {
  height: $iconDefaultSize;
  width: $iconDefaultSize;
  fill: $iconDefaultColor;
  vertical-align: middle;
  overflow: hidden;
  margin:auto;

  &--x-small {
    height: $iconXSmSize;
    width: $iconXSmSize;
  }

  &--small {
    height: $iconSmSize;
    width: $iconSmSize;
  }

  &--medium {
    width: $iconMdSize;
    height: $iconMdSize;
  }

  &--large {
    width: $iconDefaultSize;
    height: $iconDefaultSize;
  }

  &--x-large {
    width: $iconXLargeSize;
    height: $iconXLargeSize;
  }

  &--xx-large {
    width: $iconXxLargeSize;
    height: $iconXxLargeSize;
  }

  &--card {
    width: $iconCardSize;
    height: $iconCardSize;
  }

}