@import '../scss/init.scss';

.loadingScreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  overflow: hidden;

  z-index: $z_dialog;
  @include center;

  &_background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  &_front {
    position: relative;
    z-index: 1;
    padding: $s_gutter;
  }

  &_msg {
    margin-left: $s_gutter;
    word-break: break-all;
  }

  &_info {
    display: flex;
    align-items: center;
    padding: $s_gutter;
    padding-left: 0;
  }

  &_indicator {
    @include center;
  }

  &_actions {
    padding-top: $s_gutter;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid $c_divider;

    button {
      margin-right: $s_gutter;
      background-color: rgba($c_accent, 0.05);
      &:last-of-type {
        margin-right: initial;
      }
    }
  }

  &[data-status='failed'] {
    .loadingScreen {
      &_background {
        background-color: rgba($c_paper, 0.93);
      }

      &_info {
        @include center;
      }
    }
  }
}

.loadingScreen--cover {
  .loadingScreen_background {
    background-color: rgba($c_paper, 0.93);
  }
}

.loadingScreen--flat {
  position: relative;
  .loadingScreen_background {
    background: none !important;
  }
}

.loadingScreen--page {
  position: fixed;
}

.loadingScreen--dialog {
  .loadingScreen {
    &_front {
      background: $c_paper;
      color: $c_text_primary;
      @include depth(24);
      @include roundCorner();
      padding: $s_gutter $s_gutter * 2;
    }

    &_actions {
      justify-content: flex-end;
      padding: $s_gutter / 2;

      button {
        margin-right: 0;
      }
    }

    &_background {
      background-color: $c_dialog_bg !important;
    }
  }
}