// Document

@import "../base-shared";

// Desired aspect ratio is 2:3 but in reality most thumbnails are only 208px tall
// Retina dimensions: 318x
// Dimensions: 159x239
$thumbnail-img-width: rem(159px);
$thumbnail-img-height: rem(239px);
$view-height: rem(33px);
$doc-width: $thumbnail-img-width + rem(2px) + $size-base + $size-base; // 1px border & .5 rem padding on either side
$figure-height: $thumbnail-img-height - $view-height + rem(1px) + 1rem; // 1px border + 1 rem padding top

.usajobs-document {
  position: relative;
  width: $doc-width;
  margin: $size-default 0 $size-M;
  border: 1px solid $color-gray-lighter;

  &[data-state="is-selected"] {
    border-color: $color-green-dark;
  }

  &__body {
    padding: $size-M $size-default;
  }

  &__figure {
    position: relative;
    padding: $size-S $size-base 0;
    height: $figure-height;
    overflow: hidden;
    background-color: $color-white;

    &:hover {
      cursor: pointer;
    }
  }

  &__details {
    padding: $size-default $size-S 0;
    background-color: $color-white;
    text-align: center;
    border-top: 1px solid $color-gray-lighter;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.07);
  }

  a.usajobs-document__view,
  a.usajobs-document__reupload {
    display: block;
    padding: $size-base 0;
    color: $color-white;
    font-weight: bold;
    background-color: $color-primary;
    text-decoration: none;
    text-align: center;
    border-top: 1px solid $color-white;

    &:hover,
    &:visited {
      color: $color-white;
    }
  }

  &__title,
  &__type,
  &__date {
    margin: 0;
  }

  &__type,
  &__date,
  &__searchable {
    font-size: $small-font-size;
  }

  &__date {
    font-style: italic;
  }

  &__type,
  &__searchable {
    display: block;
    margin-left: -#{$size-S};
    margin-right: -#{$size-S};
    text-align: center;
    background-color: $color-gray-lightest;
  }

  &__type {
    padding: $size-base;
    font-weight: bold;
  }

  &__searchable {
    padding: $size-S $size-default;
    min-height: rem(78px);
  }

  &__searchable &__searchable-label {
    margin: 0;
  }

  &__searchable-date {
    margin: 0;
    padding-left: $size-L;
  }

  &__searchable-extend {
    font-style: normal;
    display: block;
  }

  &__controls {
    @include unstyledList();
    padding-bottom: $size-S;

    .ctrl {
      font-size: $small-font-size;
    }

    .view,
    .reupload,
    .edit,
    .duplicate,
    .delete {
      display: block;
      padding: $size-base $size-M;
      text-decoration: none;
    }

    .view,
    .reupload,
    .duplicate,
    .edit {
      &:visited {
        color: $color-primary;
      }
    }

    .delete {
      color: $color-secondary;
    }

    .pipe {
      width: 1px;
      padding: 0;
    }
  }

  &__toggle {
    position: absolute;
    top: -#{$size-S};
    right: -#{$size-default};
    margin: 0;
    padding: 0;
  }

  input[type="radio"].usajobs-document__input,
  input[type="checkbox"].usajobs-document__input {
    + label.usajobs-document__selector {
      margin: 0;

      &::before {
        background-image: none;
        box-shadow: 0 0 0 2px $color-white, 0 0 0 3px $color-primary-darker;
        height: 2rem;
        width: 2rem;
      }
    }

    &:checked + label::before {
      background-color: $color-green-dark;
      box-shadow: 0 0 0 4px $color-green-dark;
      background-image: url("../img/correct8.png");
      background-image: url("../img/correct8.svg");
    }

    &:disabled + label::before {
      background: $color-gray-lighter;
      box-shadow: 0 0 0 2px $color-white, 0 0 0 3px $color-gray-light;
      cursor: not-allowed;
    }

    &:focus + label::before {
      box-shadow: 0 0 0 4px $color-green-dark, 0 0 3px 4px $color-focus,
        0 0 7px 4px $color-focus;
    }
  }

  &__attached {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: $thumbnail-img-height / 6;
    background-color: $color-green-dark;
    color: $color-white;
  }

  &__attached-msg {
    margin: 0;
    padding: $size-S $size-base;
    color: $color-white;
  }
}

.usajobs-document--add {
  width: $thumbnail-img-width + 2rem;
  height: $thumbnail-img-height + 2rem;
  overflow: hidden;
  border: 2px dashed $color-gray-light;
  border-radius: $size-S;
  background-color: $color-gray-lightest;
  text-align: center;
  color: $color-primary;

  .usajobs-document__trigger {
    width: $thumbnail-img-width + 2rem;
    height: $thumbnail-img-height + 2rem;
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    color: $color-primary;

    &:hover {
      background-color: rgba(0, 0, 0, 0.2);
      transition: all $duration-fast;
    }
  }

  .usajobs-document__add-icon {
    display: block;
    padding-bottom: $size-S;
    font-size: rem(59px);
  }
}

.usajobs-document--placeholder,
.usajobs-document--placeholder-resume {
  .usajobs-document__figure {
    display: block;
    padding: 0;
    background-color: $color-primary-darker;
    text-align: center;
    text-decoration: none;

    &:hover {
      background-color: darken($color-primary-darker, 20%);
    }
  }

  &__icon {
    line-height: $figure-height - 0.7rem - $view-height;

    &::before {
      @include icon-content("document/file-alt", 8rem, 8rem);
      color: $color-white;
      font-size: 8rem;
      vertical-align: middle;
    }
  }

  &__icon.pdf::before {
    @include icon-content("document/file-pdf", 8rem, 8rem);
  }

  &__icon.image::before {
    @include icon-content("document/file-image", 8rem, 8rem);
  }

  &__icon.word::before {
    @include icon-content("document/file-word", 8rem, 8rem);
  }

  &__icon.text::before {
    @include icon-content("document/file-alt-o", 8rem, 8rem);
  }

  &__icon.builder::before {
    @include icon-content("document/file-alt", 8rem, 8rem);
  }

  &__view {
    padding: $size-base;
    background-color: $color-gray;
    color: $color-white;
  }
}

.usajobs-document--placeholder-resume {
  .usajobs-document__controls {
    min-height: rem(103px);
  }

  &.is-not-searchable {
    .usajobs-document__searchable p {
      margin: 0;
    }
  }
}

.usajobs-document--thumbnail {
  .usajobs-document__figure {
    position: relative;
  }

  .usajobs-document__figure-overlay::after {
    content: "\A";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all $duration-fast;
  }

  .usajobs-document__figure-overlay:hover::after {
    opacity: 1;
  }
}

.usajobs-document[data-state="is-loading"] {
  background-color: $color-gray-light;

  .usajobs-document__figure {
    background-color: $color-gray-light;

    &::before {
      content: "Your file is loading";
      position: absolute;
      top: 80%;
      left: 12%;
    }

    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: rem(-25px);
      // @include fa-icon();
      font-size: rem(50px);
      // content: $fa-var-circle-o-notch;
      color: $color-green;
      @include animation(fa-spin 2s infinite linear);
    }
  }

  .usajobs-document__figure-overlay,
  .usajobs-document__details,
  .usajobs-document__toggle {
    visibility: hidden;
  }
}

.usajobs-document[data-state="is-corrupt"] {
  background-color: $color-gray-light;
  border-color: $color-secondary;

  .usajobs-document__figure {
    background-color: $color-gray-light;

    &::before {
      content: "This file is corrupt. Please re-upload.";
      position: absolute;
      top: 60%;
      left: 15%;
    }

    &::after {
      position: absolute;
      top: 35%;
      left: 50%;
      margin-left: rem(-25px);
      // @include fa-icon();
      font-size: rem(50px);
      // content: $fa-var-chain-broken;
      color: $color-secondary;
    }

    &:hover {
      cursor: inherit;
    }
  }

  .usajobs-document__figure-overlay {
    visibility: hidden;
  }
}

.usajobs-document[data-state="is-disabled"] {
  .usajobs-document__figure {
    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: $color-gray-lightest;
      opacity: $layer-disabled;
    }

    &:hover {
      cursor: inherit;
    }
  }

  .usajobs-document__figure-overlay img {
    opacity: 0.4;
  }

  .usajobs-document__figure-overlay:hover::after {
    opacity: 0;
  }

  // Controls are visible in case the user needs to be able
  // to delete a doc
}

.usajobs-document[data-state="is-incomplete"] {
  .usajobs-document__error {
    font-size: $lead-font-size;
    color: $color-secondary;
    margin: 0;
  }

  .usajobs-document__figure {
    &:hover {
      cursor: inherit;
    }
  }

  .usajobs-document__figure-overlay:hover::after {
    opacity: 0;
  }
}