//
// File
// -----------------------------------------

.file {
  margin-bottom: $padding-base-vertical;

  &-drop {
    padding: $grid-unit-y * 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px dashed $color-grey-4;
    cursor: pointer;
    font-weight: $font-weight-regular;
    font-size: $font-size-base;
    line-height: $grid-unit-y * 2;
    text-align: center;

    @include border-radius($input-border-radius);
    @include themes(background-color, input-bg);
    @include themes(color, color-new-heading);

    &:hover {
      @include themes-border(input-border, $width: 1px);
      @include themes(background-color, file-drop-hover-bg);
    }

    &:focus {
      @include themes(background-color, file-drop-focus-bg);
    }

    &.nv-file-over,
    &-over {
      border-style: solid;

      @include themes(background-color, file-drop-hover-bg);
      @include themes-value(border-color, $input-border-focus);
    }

    &-icon {
      line-height: $grid-unit-y * 4;
      font-size: $font-size-h4;
      margin-bottom: $grid-unit-y * 0.5;

      @include themes(color, color-new-body-light);
    }

    &-accent {
      text-decoration: underline;
      font-weight: $font-weight-bold;
      padding-right: 3px;

      @include themes(color, color-text-dark);
    }
  }

  &-btn {
    position: relative;
    overflow: hidden;

    input[type="file"] {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      outline: none;
      cursor: inherit;
      display: block;
      text-indent: -9999px;
    }
  }

  &-block {
    position: relative;
    margin: auto auto;
    width: $file-block-width;
    margin-bottom: $grid-unit-y * 3;

    @include border-radius($panel-border-radius);
    @include themes(background, card-bg);
    @include box-shadow-themes(box-shadow-new);

    @include media-breakpoint-down(md) {
      width: auto;
    }

    &:hover,
    &:focus {
      @include box-shadow-themes(box-shadow-new-hover);

      .file-block-box {
        @include border-radius-bottom(0);
      }

      .file-block-desc {
        @include themes(background-color, file-block-desc-hover);
      }
    }

    &-box {
      background-color: $brand-info;
      height: $file-block-height;
      overflow: hidden;
      position: relative;

      @include border-radius-top($panel-border-radius - 1);

      &-pdf {
        background-color: $brand-danger;
      }

      &-pp {
        background-color: $brand-warning;
      }

      &-excel {
        background-color: $brand-success;
      }

      &-doc {
        background-color: $brand-info;
      }

      &-audio,
      &-video {
        background-color: $brand-primary;
      }

      &-default,
      &-image {
        @include themes(background-color, file-box-default);
      }

      &-image,
      &-audio,
      &-video {
        cursor: pointer;
      }
    }

    &-desc {
      padding: $grid-unit-y * 2;
      text-align: center;
      min-width: 0;

      @include border-radius-bottom($panel-border-radius - 1);
    }

    &-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    &-text {
      min-height: $grid-unit-y * 6;
    }

    &-title {
      font-weight: $font-weight-medium;
      font-size: $font-size-base;
      line-height: $grid-unit-y * 2;

      @include themes(color, color-heading);

      @include text-overflow-strings(2);
    }

    &-caption {
      font-size: $font-size-small;
      line-height: $grid-unit-y * 2;

      @include themes(color, color-new-body-light);
    }

    &-icon {
      font-family: $font-family-awesome;
      font-weight: 400;
      display: block;
      color: $color-white;
      line-height: $grid-unit-y * 6;
      padding-top: ceil($grid-unit-y * 4.5);
      padding-bottom: ceil($grid-unit-y * 4.5);
      text-align: center;
      font-size: $grid-unit-y * 6;
    }

    &-status {
      font-size: $font-size-large;
    }

    // Inline Variation
    &-inline {
      display: flex;
      height: $file-block-inline-height;
      width: 100%;

      @include themes-value(border-left-width, 0);
      @include themes-value(border-right-width, 0);
      @include themes-value(border-bottom-width, 0);

      @include border-radius($input-border-radius);

      &:hover,
      &:focus {
        .file-block-box {
          @include border-radius-right(0);
          @include border-radius-left($input-border-radius - 1);
        }

        .file-block-desc {
          @include border-radius-left(0);
          @include border-radius-right($input-border-radius - 1);
        }
      }

      .file-block-box {
        height: 100%;
        width: $file-block-inline-width;

        @include border-radius($input-border-radius - 1);
      }

      .file-block-icon {
        font-size: $grid-unit-y * 3;
        padding-top: 0;
        padding-bottom: 0;
        line-height: $grid-unit-y * 9;
      }

      .file-block-desc {
        flex: 1 0 0;
        text-align: left;

        > .row {
          width: calc(100% + #{$grid-unit-x * 2});
        }
      }

      &-sm {
        height: $file-block-inline-sm-height;

        @include themes-border(file-inline-sm-border);
        @include themes-value(border-bottom-width, 1px);
        @include themes-value(border-right-width, 1px);

        &:hover,
        &:focus {
          @include box-shadow(none);
        }

        .file-block-box {
          width: $file-block-inline-sm-width;

          @include border-radius-right(0);
          @include border-radius-left($border-radius-base * 2);
        }

        .file-block-icon {
          font-size: $grid-unit-y * 4;
          line-height: $grid-unit-y * 6;
        }

        .file-block-desc {
          padding: 0 $grid-unit-x;
          display: flex;
          align-items: center;
        }

        .file-block-title {
          font-size: $font-size-base;
          font-weight: $font-weight-regular;
        }

        .file-block-caption {
          @include themes(color, color-text-light);
        }
      }
    }

    // Extra Small Variation
    &-xs {
      position: relative;
      width: $file-block-xs-width;
      margin: 0;
      overflow: hidden;
      cursor: pointer;

      @include border-radius($input-border-radius);

      &:not(:last-child) {
        margin-right: $grid-unit-x;

        &.edit {
          margin-right: $grid-unit-x * 2;
        }
      }

      .file-block-box {
        margin: 0;
        height: $file-block-xs-height;

        @include border-radius($input-border-radius - 1);
      }

      .file-block-icon {
        padding: 0;
        font-size: $grid-unit-y * 5;
        line-height: $grid-unit-y * 9;
      }
    }

    // Bordered Variation
    &-bordered {
      @include themes-border(color-new-border);

      &.file-block-inline {
        @include themes-border-left(color-new-border);
        @include themes-border-right(color-new-border);
        @include themes-border-bottom(color-new-border);
      }
    }
  }
}