// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/_utils.scss" as *;

@keyframes line-pencil {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-150px);
  }
}

.wrapper {
  --loader-color-foreground: var(--color-foreground-secondary);
  --loader-icon-width: unset;

  display: inline-flex;
  column-gap: var(--sp-s);
  align-items: center;
  color: var(--loader-color-foreground);

  // Specific styles for file loading screen
  &.file-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: var(--sp-xxl);

    // Container for loader icon and tips
    .loader-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-xl);
    }

    // Tips container
    .tips-container {
      text-align: center;
      min-width: px2rem(600);
      max-width: px2rem(800);
      display: flex;
      flex-direction: column;
      gap: var(--sp-s);
      border: 1px solid var(--color-background-tertiary);
      border-radius: var(--sp-l);
      padding: var(--sp-xxl) var(--sp-xxxl);

      // Tips title
      .tip-title {
        color: var(--color-foreground-primary);
        font-weight: 500;
      }

      // Tips message
      .tip-message {
        color: var(--color-foreground-secondary);
      }
    }
  }
}

.wrapper-overlay {
  display: grid;
  place-content: center;
  height: 100%;
  width: 100%;
  row-gap: var(--sp-s);
}

.loader {
  fill: currentcolor;
  width: var(--icon-width);
}

.loader-line {
  animation: line-pencil 0.8s infinite linear;
}