// 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/typography.scss" as t;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;

.export-modal-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxl);
}

.export-modal-title {
  color: var(--color-foreground-primary);
}

.export-preview {
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
  padding-top: var(--sp-m);
  max-width: calc(var(--modal-width) - var(--modal-padding) * 2);
}

.preview-label {
  color: var(--color-foreground-secondary);
}

.preview-container {
  border: $b-1 solid var(--color-background-quaternary);
  border-radius: $br-8;
  overflow-y: auto;
  padding: var(--sp-xs) var(--sp-m);
  max-height: var(--container-max-height);
}

.file-list {
  width: 100%;
  margin-bottom: 0;
  overflow-y: auto;
}

.file-item {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: default;
  color: var(--color-foreground-secondary);
  border: $b-2 solid transparent;
}

.file-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.file-name {
  display: block;
  max-width: 99%;

  @include t.use-typography("body-medium");

  flex-grow: 1;
  padding: var(--sp-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-s);
}

.json-preview {
  width: 100%;
}

.json-preview pre {
  border: $b-1 solid var(--color-background-quaternary);
  border-radius: $br-8;
  margin: 0;
  max-height: var(--container-max-height);
  overflow: auto;
  overflow-wrap: normal;
  white-space: pre;
}

.disabled-message {
  @include t.use-typography("body-small");

  color: var(--color-foreground-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: $b-1 solid var(--color-background-quaternary);
  border-radius: $br-8;
  overflow-y: auto;
  padding: var(--sp-s) var(--sp-m);
  max-height: var(--container-max-height);
}