//! (C) Copyright 2011-2013 Hewlett-Packard Development Company, L.P.

@import "hp-piano-mixins";

.hp-file-chooser-container {
  .hp-error {
    margin: 10px 15px;
  }

  .hp-file-chooser {
    padding: 45px 30px;
    border: 1px dashed #ccc;
    position: relative;

    &.hp-file-multiple-dragover {
      border: 1px solid #DC442F;

      .hp-message {
        color: #DC442F;
        font-style: italic;
        font-size: 18px;
      }
    }

    &.hp-file-chooser-dragover {
      background-color: #e6e6e6;
      border: 1px dotted #ccc;
      font-size: 18px;
    }

    &.hp-file-chooser-dropped {
      border: 1px solid #CCCCCC;
      background-color: #fff;
    }
  
    .hp-compact & {
      padding: 15px 11px;
    }

    .hp-file-chooser-wrapper {
      display: block;
      margin: 0 auto;
      max-width: 400px;
    
      .hp-compact & {
        margin: 0px;
        display: inline-block;
        max-width: 450px;
      }
    }
    .hp-file-chooser-file {
      font-size: 18px;
      opacity: -1;
      filter: alpha(opacity=-1);
      overflow: hidden;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
	
    .hp-file-chooser-details {
      margin-bottom: 20px;
    
      .hp-compact & {
        display: inline-block;
        margin: 0px;
        padding: 7px 0px 0px;
      }
    
      .hp-message {
        word-break: break-all;
        margin-bottom: 10px;
      
        &.hp-help {
          color: #b9b8bb;
          font-style: italic;
          font-size: 18px;
        }
         
        .hp-compact & {
          font-size: inherit;
          margin-right: 10px;
          opacity: 1;
          display: inline-block;
          font-style: normal;
          color: #333;
          max-width: 240px;       
        }
      }

      .hp-file-chooser-file-size {
        vertical-align: top;
        color: #737373;
      
        .hp-compact & {
          display: inline-block;
          margin-right: 10px;
        }
      }

    }
    
    .hp-file-chooser-mask-container {
      vertical-align: top;
    
      .hp-file-chooser-mask {
        display: inline-block;
        position: relative;
      }
    
      .hp-compact & {
        display: inline-block;
      }
    }
  }

}