.x-file-viewer {
  @extend .layout-aside;
}

.x-file-viewer-aside {
  @extend .lt-aside,
          .border-right,
          .is-wider,
          .layout-column;

}
.x-file-viewer-aside-info {
  @extend .bg-white,
          .border-top,
          .p-3;
}

.x-file-viewer-aside-info-header {
  @extend .d-flex,
          .align-items-center,
          .text-primary-lighter;

  .x-icon-container {
    @extend .mr-2;
  }
}

.x-file-viewer-aside-info-content {
  .x-form-row {
    @extend .mb-1;

    > * {
      @extend .text-truncate,
              .mb-0;
    }

  }
}

.x-file-viewer-content {
  @extend .position-relative,
          .layout-column,
          .flex-auto;
  > * {
    @extend .w-100;
  }
}

.x-file-viewer-toolbar {
  @extend .border-bottom;
}

.x-file-viewer-container {
  @extend .h-100,
          .bg-light-transparent,
          .d-flex,
          .justify-content-center;

  > * {
    @extend .pt-3,
            .w-100,
            .text-center,
            .overflow-auto;
  }

}

.x-file-viewer-controls-wrapper {
  @extend .w-100,
          .d-flex,
          .fixed-bottom,
          .position-absolute,
          .justify-content-center,
          .pb-4;
}

.x-file-viewer-controls {
  @extend .px-2,
          .d-flex,
          .x-rounded-lg,
          .bg-dark-secondary;

}

.x-file-viewer-control-text {
  @extend .px-1,
          .d-flex,
          .align-items-center;
  @include size(3rem, auto);
}

.x-file-viewer-control-btn {
  @extend .btn,
          .btn-dark-secondary,
          .x-btn-icon-only-lg,
          .x-no-focus;

  @include x-no-hover-focus-active {
    .x-icon {
      opacity: .8;
    }
  }
  .x-file-viewer-control-text & {
    @extend .btn-dark,
            .p-1;
  }
}

.x-file-viewer-control-input {
  @extend .p-1,
          .form-control,
          .form-control-sm,
          .text-center;
}