$floating-max-height: 317px;
$floating-header-height: 50px;
$floating-horizontal-padding: 20px;

.floating {
  position: fixed;
  right: 40px;
  bottom: 10px;
  width: 360px;
  background-color: white;
  border: solid 1px $color-primary-text;

  &-header {
    @include align-center-vertical;
    justify-content: space-between;
    padding-left: $floating-horizontal-padding;
    height: $floating-header-height;
    background-color: $color-light-grey;

    &__text {
      height: 20px;
      font-size: 15px;
      font-weight: 600;
      color: $color-primary-text;
    }
  }

  &-close {
    @include align-center-both;
    @include size(50px);

    &__icon {
      @include cross-button;
      @include size(16px);
    }
  }

  &-body {
    max-height: $floating-max-height - $floating-header-height;
    overflow-y: auto;
    padding: 0 $floating-horizontal-padding;
  }

  &-file {
    @include align-center-vertical;
    height: 51px;
    border-bottom: 1px solid $color-light-grey;
    font-size: 13px;
    text-align: left;
    color: black;
    justify-content: space-between;

    &:first-child {
      border-top: 1px solid $color-light-grey;
    }

    &__name {
      @include ellipse-text;
      width: 161px;
      float: left;
      display: inline-block;
    }

    &__icon {
      &-image {
        @include image;
        @include size(19px);
        margin-right: 15px;
        float: left;

      }
      &-video {
        @include video;
        @include size(19px);
        margin-right: 15px;
        float: left;
      }
    }

    &__message {
      width: 80px;
      font-size: 12px;
      color: #999999;
    }

    &__progress {
      @include upload-progress;
      @include size(30px);
      animation:spin 1s linear infinite;
      @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
    }

    &__done {
      @include upload-done;
      @include size(30px);
    }

    &__fail {
      @include upload-fail;
      @include size(30px);
    }
  }
}