/**
 * Функция для получения значения градиента скелетона
 * Необходимо вызвать функцию в самом компоненте и прокинуть полученное значение в пропс gradientColor
 * Пример в компоненте Skeleton/LineSkeleton
 */
var getSkeletonColor = function getSkeletonColor(_ref) {
  var lighter = _ref.lighter,
    customGradientColor = _ref.customGradientColor;
  if (customGradientColor) {
    return customGradientColor.trim();
  }
  if (lighter) {
    return 'var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient))';
  }
  return 'var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient))';
};

/**
 * Миксин применения градиента скелетона.
 * gradientColor должно передаваться как css-переменная
 * applySkeletonShimmerGradient('var(--gradient-token)', '--duration-token')
 */
var applySkeletonShimmerGradient = function applySkeletonShimmerGradient(gradientColor, shimmerDuration) {
  return "\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* for safari */\n\n    --plasma_private-skeleton-shimmer-duration: var(".concat(shimmerDuration, ", 4s);\n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: -100vw;\n        width: 200vw;\n        height: 100%;\n        animation: loading var(--plasma_private-skeleton-shimmer-duration, 4s) linear infinite;\n        background-image: ").concat(gradientColor, ";\n    }\n\n    @keyframes loading {\n        from {\n            transform: translateX(0);\n        }\n\n        to {\n            transform: translateX(100vw);\n        }\n    }\n");
};

/**
 * Миксин применения анимации пульсации скелетона.
 * fadeInColor и fadeOutColor должны передаваться как css-переменные
 * applySkeletonPulseGradient('--fade-in-token', '--fade-out-token')
 */
var applySkeletonPulseGradient = function applySkeletonPulseGradient(fadeInColor, fadeOutColor, pulseDuration) {
  return "\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* for safari */\n\n    --plasma_private-skeleton-pulse-duration: var(".concat(pulseDuration, ", 0.6s);\n\n    &::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        background-color: var(").concat(fadeInColor, ", var(--surface-transparent-secondary));\n\n        animation: pulsating var(--plasma_private-skeleton-pulse-duration, 0.6s) linear infinite alternate;\n    }\n\n    @keyframes pulsating {\n        0% {\n            background-color: var(").concat(fadeInColor, ", var(--surface-transparent-secondary));\n        }\n\n        100% {\n            background-color: var(").concat(fadeOutColor, ", var(--surface-transparent-tertiary));\n        }\n    }\n");
};

export { applySkeletonPulseGradient, applySkeletonShimmerGradient, getSkeletonColor };
