@mixin column-flex-gap($gap: 0) {
  display: flex;
  flex-direction: column;
  gap: $gap;
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin center {
  display: grid;
  place-items: center;
}

@mixin icon-container($height: 24px, $width: 24px) {
  height: $height;
  width: $width;
}

.ff-file-dropzone-wrapper {
  @include column-flex-gap(10px);
  

  .ff-file-dropzone {
    padding: 16px 0;
    border-radius: 8px;
    background: var(--file-dropzone-default-color);
    border: 1px dashed var(--brand-color);
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 8px;
    transition: background-color 0.2s ease;

    .ff-radio-group-wrapper {
      position: relative;
      bottom: 8px;
    }

    &:hover,
    &--active {
      background-color: var(--file-dropzone-selected-color);
    }
    &--webservice-file {
      @include center;
    }
    &--webservice-container {
      @include center;
      padding: 16px 0 40px 0;
    }
    &-content {
      &__icon {
        height: 80px;
        width: 80px;
        display: grid;
        place-items: center;
      }

      &__labels {
        .choose-file-btn {
          margin: 0 auto;
          position: relative;
          font-weight: 600;
          line-height: 15px;

          input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
          }
        }
      }
      &__webservice-file {
        padding: 4px;
      }
    }
  }
}
.ff-file-details-wrapper {
    @include column-flex-gap(10px);
    max-height: 300px;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 2px;
    ::-webkit-scrollbar {
      width: 2px;
    }
    -ms-overflow-style: none;
    scrollbar-width: thin;

    .ff-file-details {
      @include column-flex-gap(10px);

      &__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px;
        border-radius: 4px;
        background-color: var(--file-details-bg);
        box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);
        overflow: hidden;

        .ff-file-info {
          display: flex;
          align-items: center;
          gap: 4px;
          width: 87%;

          .ff-file-info__icon {
            @include center;
            @include icon-container;
          }

          &__name-wrapper {
            @include column-flex-gap(2px);
            justify-content: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;

            &__name {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              display: block;
              color: var(--text-color);
            }
          }
        }

        .ff-file-actions {
          display: flex;
          align-items: center;
          gap: 8px;
          &__icon-replace,
          &__icon-remove {
            @include icon-container;
            @include center;
            cursor: pointer;
          }
        }
      }
    }
  }
.ff-webservice-file-wrapper {
  display: flex;
  gap: 8px;
  .ff-webservice-file-name {
    position: relative;
    bottom: 2px;
  }
}
.ff-input-ref {
  display: none;
}
.ff-disable-file-dropzone-wrapper {
  opacity: 0.5;
  cursor: not-allowed;
}
.footer_basic_button {
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  @include flex-center;
  justify-content: flex-end;
  gap: 16px;
  border-top: 1px solid var(--border-color);
  padding: 4px 8px;
  background-color: var(--primary-icon-color);
}


.ff-upload-options-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.ff-upload-mode-buttons {
  display: flex;
  width: 640px;
  gap: 10px;
}

.ff-url-upload-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 640px;
}

.ff-custom-button {
  padding: 8px 16px;
   border: 1px solid var(--border-color);
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
   background-color: var(--drawer-footer-bg); 
  color: var(--text-color);

  &:hover {
    background-color: var(--default-chip-count-background-color); 
    color:var(--text-color);
  }

  &--active {
    background-color: var(--default-chip-count-background-color);
    color: var(--text-color);

    &:hover {
      background-color: var(--default-chip-count-background-color); 
      color: var(--text-color);
    }
  }

}


.ff-uploaded-apps-wrapper {
  display: flex;
  flex-direction: column;
  width: 640px;
  border-top: 2px solid var(--border-color);
  background-color: var(--drawer-footer-bg); 
  padding: 10px 0px;
}

.ff-uploaded-apps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ff-uploaded-app-item {
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;

      &:hover {
      background-color: var(--default-chip-count-background-color); 
      color: var(--text-color);
    }

    &--selected {
    background-color: var(--default-chip-count-background-color); 
    color: var(--text-color); 
  }

}