s5l.ru-crm/app/components/Admin/MediaUpload/index.styl

.media-upload
  border: 2px dashed var(--border-color)
  border-radius: var(--border-radius)
  transition: var(--transition-normal)
  overflow: hidden

.media-upload__dropzone
  position: relative
  min-height: 200px
  display: flex
  align-items: center
  justify-content: center
  background: var(--color-light-10)
  cursor: pointer
  
  .theme-dark &
    background: var(--color-dark-50)
  
  &:hover
    border-color: var(--color-primary-50)
    background: var(--color-primary-10)
  
  &.media-upload__dropzone--dragging
    border-color: var(--color-primary)
    background: var(--color-primary-20)
  
  &.media-upload__dropzone--has-image
    min-height: 300px
    background: var(--color-white)
    
    .theme-dark &
      background: var(--color-dark)

.media-upload__preview
  position: relative
  width: 100%
  height: 100%
  display: flex
  align-items: center
  justify-content: center
  padding: var(--spacing-md)

.media-upload__image
  max-width: 100%
  max-height: 250px
  object-fit: contain
  border-radius: var(--border-radius-sm)

.media-upload__preview-actions
  position: absolute
  top: var(--spacing-md)
  right: var(--spacing-md)
  display: flex
  gap: var(--spacing-sm)
  opacity: 0
  transition: var(--transition-fast)
  
  .media-upload__preview:hover &
    opacity: 1

.media-upload__remove-btn,
.media-upload__change-btn
  width: 36px
  height: 36px
  border: none
  border-radius: 50%
  display: flex
  align-items: center
  justify-content: center
  cursor: pointer
  font-size: var(--font-size-lg)
  transition: var(--transition-fast)

.media-upload__remove-btn
  background: var(--color-danger)
  color: var(--color-white)
  
  &:hover
    background: var(--color-danger-50)
    transform: scale(1.1)

.media-upload__change-btn
  background: var(--color-primary)
  color: var(--color-white)
  
  &:hover
    background: var(--color-primary-50)
    transform: scale(1.1)

.media-upload__uploading
  display: flex
  flex-direction: column
  align-items: center
  gap: var(--spacing-md)
  color: var(--color-secondary)

.media-upload__spinner
  width: 40px
  height: 40px
  border: 3px solid var(--color-primary-10)
  border-top: 3px solid var(--color-primary)
  border-radius: 50%
  animation: media-upload-spin 1s linear infinite

@keyframes media-upload-spin
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

.media-upload__empty
  display: flex
  flex-direction: column
  align-items: center
  gap: var(--spacing-md)
  padding: var(--spacing-xl)
  text-align: center

.media-upload__icon
  font-size: 3rem
  opacity: 0.7

.media-upload__title
  font-size: var(--font-size-lg)
  font-weight: var(--font-weight-semibold)
  color: var(--color-dark)
  margin: 0
  
  .theme-dark &
    color: var(--color-light)

.media-upload__subtitle
  color: var(--color-secondary)
  margin: 0

.media-upload__browse-btn
  padding: var(--spacing-sm) var(--spacing-lg)
  background: var(--color-primary)
  color: var(--color-white)
  border: none
  border-radius: var(--border-radius)
  cursor: pointer
  font-weight: var(--font-weight-medium)
  transition: var(--transition-fast)
  
  &:hover
    background: var(--color-primary-50)
    transform: translateY(-1px)

.media-upload__hint
  font-size: var(--font-size-sm)
  color: var(--color-secondary)
  margin: 0

.media-upload__input
  display: none

.media-upload__file-info
  padding: var(--spacing-md)
  background: var(--color-light-10)
  border-top: 1px solid var(--border-color)
  
  .theme-dark &
    background: var(--color-dark-50)

.media-upload__file-name
  font-weight: var(--font-weight-medium)
  margin-bottom: var(--spacing-xs)

.media-upload__file-size
  font-size: var(--font-size-sm)
  color: var(--color-secondary)

.media-upload__progress
  padding: var(--spacing-md)
  background: var(--color-light-10)
  border-top: 1px solid var(--border-color)
  
  .theme-dark &
    background: var(--color-dark-50)

.media-upload__progress-bar
  height: 6px
  background: var(--color-light-50)
  border-radius: 3px
  overflow: hidden
  margin-bottom: var(--spacing-sm)
  
  .theme-dark &
    background: var(--color-dark-20)

.media-upload__progress-fill
  height: 100%
  background: var(--color-primary)
  transition: width 0.3s ease
  border-radius: 3px

.media-upload__progress-text
  font-size: var(--font-size-sm)
  color: var(--color-secondary)
  text-align: center
  display: block

// Адаптивность
@media (max-width: 768px)
  .media-upload__dropzone
    min-height: 150px
    
    &.media-upload__dropzone--has-image
      min-height: 250px
  
  .media-upload__preview-actions
    opacity: 1
  
  .media-upload__empty
    padding: var(--spacing-lg)
  
  .media-upload__icon
    font-size: 2rem