style.scss

// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.

// ---------------------------------------------------------------------

// Import Auro tokens
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';

@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';

// container styles - defines the look of the outer custom component
:host {
  display: block;
  animation-duration: 2s;
  animation-fill-mode: backwards;
  animation-iteration-count: infinite;
  animation-name: place-holder-shimmer;
  animation-timing-function: linear;
  background-repeat: no-repeat;
  background-size: 1000px 100%;
}

:host([shape='circle']) {
  width: auto;
  border-radius: 50%;
}

:host([shape='oval']) {
  border-radius: 9999px;
}

:host([shape='rectangle']) {
  border-radius: var(--ds-border-radius, $ds-border-radius);
}

@keyframes place-holder-shimmer{
  from {
    background-position: -1000px 0;
  }

  to {
    background-position: 1000px 0;
  }
}