@import "mixins/elevation";
@import "mixins/tk-retina";
@import "mixins/create-text-field";

@mixin component-spacing($inline: false) {
  @if $inline {
    padding: calc(#{$label-font-size} * #{$label-line-height} + 5px) 5px 5px 5px;
  } @else {
    padding: 5px;
  }

  &.NoLabel {
    padding: calc(#{$label-font-size} * #{$label-line-height} + 5px) 5px 5px 5px;
  }
}

@mixin show-animation() {
  opacity: 1;
  transform: scale(1);

  transition: opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);


  &.ng-hide {
    display: none !important;
    opacity: 0;
    transform: scale(0);
  }
}

@mixin color-declaration($rule, $sass-var, $css-var, $hasAlpha: false, $alphaValue: 1) {
  @if ($hasAlpha) {
    #{$rule}: unquote('rgba(#{$sass-var}, #{$alphaValue})');
    #{$rule}: unquote('rgba(var(#{$css-var}, #{$sass-var}), #{$alphaValue})');
  } @else {
    #{$rule}: unquote('rgb(#{$sass-var})');
    #{$rule}: unquote('rgb(var(#{$css-var}, #{$sass-var}))');
  }
}
