/* File Uploader */

.file-uploader {
  display:           inline-block;
}

.file-uploader .action-button {
  padding:           0.3rem 1rem;
  font-size:         130%;
}

.page-controls .file-uploader .action-button {
  font-size:         85%;
}

.image-select .file-uploader .action-button {
  font-size:         90%;
}

.file-uploader .panel { /* Note: changing height causes too many problems */
  position:          absolute;
  z-index:           1000;
  padding:           0 0.5em;
  margin-top:        0.2em;
  line-height:       normal;
  vertical-align:    middle;
  font-size:         130%;
  background:        white;
  border-radius:     0.4em;
  box-shadow:        0.2em 0.2em 0.5em gray;
}

.file-uploader .meter {
  display:           inline-block;
  width:             20vw;
  padding:           0.2rem;
  vertical-align:    middle;
  background:        white;
}

.file-uploader .prbar {
  display:           inline-block;
  width:             87%;
  padding:           0.2em 0 0.4em;
  text-align:        center;
}

.file-uploader .panel .x-button {
  position:          static;
}

.file-uploader .meter .info {
  margin:            0.4rem 0 0;
  font-size:         0.9em;
}

.file-uploader .meter .progress-text {
  margin:            0 0.5rem;
  font-size:         0.9em;
}

.cbu-button .file-uploader .meter {
  width:             23.5rem;
}

.page-controls .file-uploader .info,
.page-controls .file-uploader .meter .progress-text {
  font-size:         65%;
}

.RTL .page-controls .file-uploader .panel {
  left:              1em;
}

.LTR .page-controls .file-uploader .panel {
  right:             1em;
}

.file-uploader .action-button.area {
  box-sizing:        border-box;
  margin:            0.1em 0 0;
  padding:           0;
  font-size:         100%;
  line-height:       normal;
  text-align:        center;
  color:             #666666;
  background:        white;
  box-shadow:        none;
}


.file-uploader .action-button.area:active,
.file-uploader .action-button.area.active {
  background:        #0074E10D;
  border-color:      gray;
  box-shadow:        none;
}

.file-uploader .action-button.area-large {
  display:           block;
  width:             27.25rem;
  height:            17.75rem;
  margin-top:        0;
  padding:           1.2rem 1.3rem;
  border:            2px dashed #ACACAC;
  border-radius:     8px;
}

.file-uploader .action-button.area-large .file-upload-icon {
  display:           block;
  height:            3.8rem;
  margin:            1rem auto 1.25rem;
}

.file-uploader .action-button.area-large .fu-1,
.file-uploader .action-button.area-large .fu-2 {
  display:           block;
  margin-top:        1rem;
}

.file-uploader .action-button.area-small {
  display:           grid;
  grid-template-columns: max-content max-content max-content;
  align-items:       center;
  justify-content:   center;
  box-sizing:        border-box;
  width:             100%;
  padding:           0.75rem 1rem;
  column-gap:        0.7rem;
  border:            0.05em dashed gray;
  border-radius:     4px;
}

.file-uploader .action-button.area-small .fu-1 {
  grid-column:       1;
}

.file-uploader .action-button.area-small .fu-2 {
  grid-column:       2;
}

.file-uploader .action-button.area-small .fu-3 {
  grid-column:       3;
}

.file-uploader .action-button.area .fu-1 {
  font-weight:       600;
  color:             #666666;
  white-space:       nowrap;
}

.file-uploader .action-button.area .fu-2 {
  font-weight:       400;
  color:             #666666;
  white-space:       nowrap;
}

.file-uploader .action-button.area .fu-3 {
  padding:           4px 32px;
  font-size:         90%;
  font-weight:       600;
  color:             var(--ActionColor);
  background:        #0074E10D;
  border:            1px solid var(--ActionColor);
  border-radius:     4px;
  white-space:       nowrap;
}

.file-uploader .action-button.area-large .fu-2 {
  font-size:         90%;
}

.file-uploader .action-button.area-large .fu-3 {
  display:           block;
  width:             fit-content;
  margin:           1rem auto 0;
}

.file-uploader .action-button.area.active .fu-1,
.file-uploader .action-button.area.active .fu-2 {
  color:             #000000;
}

.file-uploader .action-button.area .fu-3:hover {
  color:             #0055A5;
  background:        #C2DAF0;
  border-color:      #0055A5;
  box-shadow:        none;
}

.file-uploader .action-button.area .fu-3:active {
  color:             var(--ActiveActionColor);
  background:        #BCC9D5;
  border-color:      var(--ActiveActionColor);
}

.file-uploader .action-button.area .uploaded-successfully {
  margin-top:        0.5rem;
  font-weight:       600;
  text-align:        center;
  direction:         ltr;
  white-space:       normal;
  overflow-wrap:     anywhere;
}

.file-uploader .action-button.area-small .uploaded-successfully {
  grid-column:       1 / -1;
  min-width:         0;
}

.file-uploader .action-button.area .uploaded-successfully:empty {
  display:           none;
}

.file-uploader .action-button.area ~ .panel {
  position:          relative;
  top:               0.5rem;
  z-index:           400000002;
}

.file-uploader .action-button.secondary-button.active,
.control-panel .file-uploader .action-button.active {
  color:             #000000;
  background:        #FF6;
  border:            1px solid #444;
}

.file-uploader .success-display img {
  width:             1.25rem;
}

.file-uploader .success-display {
  display:           flex;
  align-items:       center;
  box-sizing:        border-box;
  width:             100%;
  padding:           0.25rem 1rem;
  gap:               0.7rem;
  border:            0.05em dashed gray;
  border-top:        0;
  border-radius:     4px;
  background:        white;
}

.file-uploader .success-display .filename {
  min-width:         0;
  overflow-wrap:     anywhere;
}

.file-uploader .success-display .icon-button {
  flex:              none;
  margin-inline-start: auto;
  margin-inline-end: -0.4rem;
}

/* Form specific */

.field.file .file-uploader {
  width:             100%;
}

.field.file.error .file-uploader .action-button {
  border:            2px solid var(--ErrorColor);
}