@import '../../scss/styles.scss';

@layer payload-default {
  .file-field {
    position: relative;
    margin-bottom: var(--base);
    background: var(--theme-elevation-50);
    border-radius: var(--style-radius-s);

    &__upload {
      display: flex;
    }

    .tooltip.error-message {
      z-index: 3;
      bottom: calc(100% - #{calc(var(--base) * 0.5)});
    }

    &__file-selected {
      display: flex;
    }

    &__thumbnail-wrap {
      position: relative;
      width: 150px;

      .thumbnail {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: var(--style-radius-s) 0 0 var(--style-radius-s);
      }
    }

    &__remove {
      margin: calc($baseline * 1.5) $baseline $baseline 0;
      place-self: flex-start;
    }

    &__file-adjustments,
    &__remote-file-wrap {
      padding: $baseline;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: calc(var(--base) / 2);
    }

    &__filename,
    &__remote-file {
      @include formInput;
      background-color: var(--theme-bg);
    }

    &__upload-actions,
    &__add-file-wrap {
      display: flex;
      gap: calc(var(--base) / 2);
      flex-wrap: wrap;
    }

    &__upload-actions {
      margin-top: calc(var(--base) * 0.5);
    }

    &__previewDrawer {
      & h2 {
        margin: 0 var(--base) 0 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - calc(var(--base) * 2));
      }
    }

    .dropzone {
      background-color: transparent;
      padding-block: calc(var(--base) * 2.25);
    }

    &__dropzoneContent {
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--base) * 0.4);
      justify-content: space-between;
      width: 100%;
    }

    &__dropzoneButtons {
      display: flex;
      gap: calc(var(--base) * 0.5);
      align-items: center;
    }

    &__orText {
      color: var(--theme-elevation-500);
      text-transform: lowercase;
    }

    &__dragAndDropText {
      flex-shrink: 0;
      margin: 0;
      text-transform: lowercase;
      align-self: center;
      color: var(--theme-elevation-500);
    }

    @include small-break {
      &__upload {
        flex-wrap: wrap;
        justify-content: space-between;
      }

      &__remove {
        margin: $baseline;
        order: 2;
      }

      &__file-adjustments {
        order: 3;
        border-top: 2px solid var(--theme-elevation-0);
        padding: calc($baseline * 0.5);
        gap: 0;
      }

      &__thumbnail-wrap {
        order: 1;
        width: 50%;

        .thumbnail {
          width: 100%;
        }
      }

      &__edit {
        display: none;
      }
    }
  }
}