@import 'src/components/progressBar/progressBar.css';
@import 'src/components/skeleton/skeleton.css';
@import 'src/components/spinner/spinner.css';
@import url(src/assets/fonts/font.css);

.pl-splash {
  /* Colors */
  --pl-color-purple: rgb(55, 0, 60);
  --pl-color-pink: #FC2C80;
  --pl-color-orange: #ff6e09;
  --pl-color-yellow: #ebff00;
  --pl-color-green: #00e676;
  --pl-color-blue: #05f0ff;
  --pl-color-stone: #EBEBEB;
  --pl-color-lilac: #963cff;

  --pl-bg-sidebar: #FAFAFA;
  --pl-bg-skeleton-line: rgba(255, 255, 255, 0.18);

  /* Gradients */
  --pl-gradient-sidebar-edge: linear-gradient(
    to bottom,
    #12e6ff,
    #db25ff
  );
  --pl-gradient-sidebar-edge-opacity: linear-gradient(
    to bottom,
    rgba(18, 230, 255, 0.5),
    rgba(219, 37, 255, 0.5)
  );
  --pl-gradient-blue-purple: linear-gradient(
    137.27deg,
    var(--pl-color-blue) 10%,
    #58e1ff 30%,
    #7367ff 60%,
    var(--pl-color-lilac) 90%,
    #c32fff 100%
  );

  /* Typography */
  --pl-font-family-regular: 'PremierLeagueRegular', sans-serif;
  --pl-font-family-bold: 'PremierLeagueBold', sans-serif;

  /* Base Styles */
  &,
  & * {
    box-sizing: border-box;
  }

  overflow: hidden;
  font-family: var(--pl-font-family-regular);
  margin: 0;
  padding: 0;
  position: relative;

  /* Splash Block */
  .splash__container {
    background-color: white;
  }

  /* Root Placeholder Block */
  .root-placeholder__content {
    font-size: 38px;
    font-weight: bold;
  }
}