@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 */
  --primary-color: rgb(55, 0, 60);
  --secondary-color: #FC2C80;
  --tertiary-color: #05f0ff;
  --quaternary-color: #963cff;
  --pl-color-stone: #EBEBEB;

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

  /* Gradients */
  --pl-gradient-sidebar-edge: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--tertiary-color), black 20%),
    color-mix(in srgb, var(--quaternary-color), black 20%)
  );
  --pl-gradient-sidebar-edge-opacity: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--tertiary-color), white 50%),
    color-mix(in srgb, var(--quaternary-color), white 50%)
  );

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

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

  overflow: hidden;
  font-family: var(--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;
  }

  .skeleton__logo-image {
    max-width: 116px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
  }
}