import { css } from 'lit';

export const styles = css`
  :host {
    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
    box-sizing: border-box;
    display: block;
    width: 100%;
  }

  .skeleton-loader {
    display: block;
    width: 100%;
  }

  .skeleton {
    display: block;
    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-tertiary));
    animation: blink 1.2s ease-in-out infinite;
    box-sizing: border-box;
  }

  .skeleton--rectangular {
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
  }

  .skeleton--circular {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
  }

  .skeleton--text {
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
    height: 1em;
  }

  .skeleton--rounded {
    border-radius: var(--nile-radius-radius-md, var(--ng-radius-md));
  }

  @keyframes blink {
    0%, 100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }
`;

export default [styles];