// Fileupload Uplift styles
// ===========================================

.fileupload-wrapper {
  .container {
    &.drop-area {
      padding: 25px 30px 20px;
    }

    .file-row,
    .progress-row {
      .status-icon {
        margin-top: 12px;

        .btn-icon:hover {
          background-color: transparent;
        }

        &.file-error {
          margin-top: 15px;
        }

        > .icon {
          color: $ids-color-palette-white;
          top: -3px;
        }

        button {
          .icon {
            left: 0;
            top: -3px;
          }
        }

        .btn-icon .icon {
          margin-top: -7px;
        }
      }

      .description {
        margin-top: 2px;
      }
    }

    .fileupload-adv-browse-lbl {
      margin-bottom: 0;
    }

    .l-pull-right {
      margin-top: 1px;

      &.file-error .size {
        margin-right: 0;
      }
    }
  }
}

.field-fileupload {
  .fileupload:not([disabled]) + .trigger {
    &:hover {
      background-color: $button-color-tertiary-hover-background-new;
    }
  }

  .trigger,
  .trigger-close {
    &.trigger-close {
      left: 7px;
      top: -4px;

      &:hover {
        background-color: $button-color-tertiary-hover-background-new;
      }
    }

    &.trigger {
      top: -2px;
    }
  }
}

.form-layout-compact {
  .field-fileupload {
    .trigger {
      top: -1px;

      .icon {
        top: 4px;
      }
    }

    .trigger-close {
      margin-left: -47px;
      top: 0;
    }
  }
}

// Firefox needs some hand-holding
.is-firefox {
  &.is-mac {
    .fileupload-wrapper {
      .container {
        .file-row,
        .progress-row {
          .status-icon {
            button {
              .icon {
                top: -4px !important;
                margin-top: -8px;
              }
            }

            .icon {
              top: -3px;
            }
          }
        }
      }
    }
  }

  .fileupload-wrapper {
    .container {
      .file-row,
      .progress-row {
        .status-icon {
          button {
            .icon {
              top: -3px;
            }
          }
        }
      }
    }
  }
}

// ie11
.ie11 {
  .fileupload-wrapper {
    .container {
      .file-row,
      .progress-row {
        .status-icon {
          button {
            .icon {
              top: -7px;
            }
          }
        }
      }
    }
  }
}

html[dir='rtl'] {
  .fileupload-wrapper {
    .container {
      .progress-row {
        .status-icon {
          > .icon {
            top: -1px;
          }

          button {
            .icon {
              left: inherit;
              right: 0;
              top: -1px;
            }
          }
        }
      }
    }
  }

  .form-layout-compact {
    .field-fileupload {
      .trigger-close {
        margin-right: -7px;
      }
    }
  }
}