/* Can be tested via /test-resources/sap/ushell/bootstrap/SplashTest.html */

/* ----------------------------------------------------------
   Custom property defaults
   All defaults approximate SAP Horizon Morning theme values.
   The real css parameters are used when they are available.
   ---------------------------------------------------------- */
:root {
    /* Shell bar */
    --sapUshellSplash_ShellBarHeight: 3.25rem;
    --sapUshellSplash_ShellBarBackground: var(--sapShellColor, #fff);

    --sapUshellSplash_ShellItemBackground: var(--sapContent_Placeholderloading_Background, #ccc);
    --sapUshellSplash_ShellItemGradient: var(--sapContent_Placeholderloading_Gradient, linear-gradient(to right, #ccc 0, #ccc 20%, #999 50%, #ccc 80%, #ccc 100%));

    /* Content area */
    --sapUshellSplash_ContentBackground: var(--sapShell_BackgroundImage, linear-gradient(to bottom, #eff1f2, #eff1f2));

    /* Shared */
    --sapUshellSplash_BorderRadius: 0.25rem;
    --sapUshellSplash_AnimationDuration: 2000ms;
}

/* ----------------------------------------------------------
   Overlay
   ---------------------------------------------------------- */
.sapUshellSplash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    z-index: 2000;
    background-color: var(--sapUshellSplash_ContentBackground);
}

/* ----------------------------------------------------------
   Shell bar
   Implements the responsive padding according to Horizon
   spec breakpoints.
   Spacings within the shell bar are NOt according to spec.
   ---------------------------------------------------------- */
.sapUshellSplashBar {
    height: var(--sapUshellSplash_ShellBarHeight);
    background-color: var(--sapUshellSplash_ShellBarBackground);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    box-sizing: border-box;
}

@media (max-width: 600px) { /* S */
  .sapUshellSplashBar {
    padding: 0 1rem;
  }
}

@media (min-width: 600px) and (max-width: 1024px ) { /* M */
  .sapUshellSplashBar {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) and (max-width: 1440px ) { /* L */
  .sapUshellSplashBar {
    padding: 0 2rem;
  }
}

@media (min-width: 1440px) { /* XL */
  .sapUshellSplashBar {
    padding: 0 3rem;
  }
}

.sapUshellSplashBarStart {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sapUshellSplashBarEnd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Shell bar placeholder shapes */
.sapUshellSplashBarLogo {
    width: 3.8rem; /* roughly the size of the SAP Logo */
    height: 2rem;
    border-radius: var(--sapUshellSplash_BorderRadius);
    flex-shrink: 0;
}

.sapUshellSplashBarTitle {
    width: 8rem;
    height: 1rem;
    border-radius: var(--sapUshellSplash_BorderRadius);
}

.sapUshellSplashBarBtn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.sapUshellSplashBarAvatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

/* ----------------------------------------------------------
   Shell bar shimmer

   Uses a ::after pseudo-element translated from left to right.
   The snap-back at loop end happens while the pseudo-element is
   fully outside the parent (overflow: hidden), so it is invisible.
   ---------------------------------------------------------- */
.sapUshellSplashBarShimmer {
    background-color: var(--sapUshellSplash_ShellItemBackground);
    position: relative;
    overflow: hidden;
}

.sapUshellSplashBarShimmer::after {
    content: '';
    position: absolute;
    width: 300%;
    inset: 0;
    background-image: var(--sapUshellSplash_ShellItemGradient);
    background-repeat: no-repeat;

    transform: translateX(-100%);
    animation-duration: var(--sapUshellSplash_AnimationDuration);
    animation-name: sapUshellSplashShimmer;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes sapUshellSplashShimmer {
    0%   {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
}

/* ----------------------------------------------------------
   Content area - static radial bloom, no animation
   ---------------------------------------------------------- */
.sapUshellSplashContent {
    flex: 1;
    background-image: var(--sapUshellSplash_ContentBackground);
}

/* ----------------------------------------------------------
   Responsive - mobile (<600px)
   Per Horizon spec: only page title placeholder and avatar visible.
   ---------------------------------------------------------- */
@media (max-width: 599px) {
    .sapUshellSplashBarLogo,
    .sapUshellSplashBarBtn {
        display: none;
    }
}
