@use "@milaboratories/uikit/assets/mixins.scss" as *;

.block {
  flex: 1;
  background-color: #fff;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  height: 100%;
  position: relative;

  display: flex;
  flex-direction: column;

  @include scrollbar(true, true);

  &__not-found {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
  }

  &__loader-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
    .loader-container {
      display: flex;
      transform: scale(8);
    }
    .loader-icon {
      animation: spin 4s linear infinite;
      background-color: #ccc;
      margin: auto;
    }
  }

  &__layout {
    padding: 0;
  }

  &__loader {
    height: 4px;
    background-color: transparent;
    position: absolute;
    z-index: 1; // @TODO
    top: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    &:before {
      content: "";
      position: absolute;
      left: -50%;
      height: 4px;
      width: 33%;
      background-color: var(--border-color-focus);
      animation: loader-animation 1.3s linear infinite;
    }
  }

  &__progress {
    --progress-width: 0%;
    height: 4px;
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      height: 4px;
      width: var(--progress-width);
      background-color: var(--border-color-focus);
      will-change: width;
      background-image: linear-gradient(90deg, #0000 0%, rgba(255, 255, 255, 0.8) 50%, #0000 100%);
      background-position: 0 0;
      background-size: 80px 100%;
      background-repeat: repeat-y;
      animation: shine-animation 1.2s linear infinite;
    }
  }

  @keyframes shine-animation {
    from {
      background-position: -160px 0;
    }
    to {
      background-position: calc(100% + 80px) 0;
    }
  }

  &__error {
    background: var(--txt-error);
    color: #fff;
    max-height: 50vh;
    padding: 16px 24px;
    user-select: auto;
    width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    @include scrollbar(true, true); // @todo scrollbar persistent
    pre {
      white-space: pre-wrap;
      margin: 0;
    }
  }

  .scroll-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    > div:last-child {
      flex: 1;
      overflow: auto;
    }
  }

  @keyframes loader-animation {
    0% {
      left: -40%;
    }
    50% {
      left: 20%;
      width: 38%;
    }
    100% {
      left: 100%;
      width: 50%;
    }
  }
}