// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "./common";

/*
Skeletons

Markup:
<div class="pt-card">
  <h5><a class="{{.modifier}}" href="#" tabindex="-1">Card heading</a></h5>
  <p class="{{.modifier}}">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget tortor felis.
    Fusce dapibus metus in dapibus mollis. Quisque eget ex diam.
  </p>
  <button type="button" class="pt-button {{.modifier}}" tabindex="-1">Submit</button>
</div>

.pt-skeleton - Render this element as a skeleton, an outline of its true self.

Styleguide pt-skeleton
*/

@keyframes glow {
  0%,
  100% {
    border-color: $skeleton-color-start;
    background-color: $skeleton-color-start;
  }

  50% {
    border-color: $skeleton-color-end;
    background-color: $skeleton-color-end;
  }
}

// This class hides content with a glowing, rounded rectangle. CSS properties that should always
// override consumer values use the "!important" rule.
/* stylelint-disable declaration-no-important */
.pt-skeleton {
  border-color: $skeleton-color-start !important;
  border-radius: 2px;
  box-shadow: none !important;
  background: $skeleton-color-start !important;

  // Prevent background color from extending to the border and overlappping
  background-clip: padding-box !important;
  cursor: default;

  // Transparent text will occupy space but be invisible to the user
  color: transparent !important;
  animation: $skeleton-animation;
  pointer-events: none;
  user-select: none;
}
/* stylelint-enable declaration-no-important */