@import '~pix-styles/src/scss/partials/variables';
@import '~pix-styles/src/scss/partials/mixins';
//@import '~angular-ui-grid/dist/release/angular-ui-grid.css';

$white: #fff;
$background-color: #333;
$sep-color: #515151;
$selected-color: #666;

.filebrowser {

  height: 100%;
  width: 100%;

  .nowrap {
    white-space: nowrap;
    text-overflow: ellipsis
  }

  .filebrowser-thumbnail-holder {
    display: inline-block;
    height: 20px;
    width: 20px;
  }

  .filebrowser-thumbnail {
    height: 20px;
    visibility: hidden;
    width: 20px;

    &.portrait {
      height: 100%;
      visibility: visible;
      width: auto;
    }

    &.landscape {
      height: auto;
      visibility: visible;
      width: 100%;
    }
  }

  &.ui-grid {
    border: 0 !important;
    color: $white;
    overflow-x: hidden;

    .ui-grid-top-panel {
      background: $palette-black;
    }

    .ui-grid-header {
      background-color: $background-color;
      border: 0;
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .20);

      .ui-grid-header-cell {
        background-color: $background-color;
        border-color: $sep-color;
      }
    }

    .ui-grid-icon-up-dir:before {
      content: '\25b2';
      font-size: 10px;
    }

    .ui-grid-icon-down-dir:before {
      content: '\25bc';
      font-size: 10px;
    }

    .ui-grid-row {
      .ui-grid-cell {
        border-color: $sep-color;
      }

      &.ui-grid-row-selected .ui-grid-cell {
        background-color: $selected-color !important;
      }

      &:nth-child(even) .ui-grid-cell {
        background: $background-color;
      }

      &:nth-child(odd) .ui-grid-cell {
        background: rgba($white, .10);
      }
    }
  }
}

.filebrowser-empty {
  border-radius: $border-radius;
  background-color: rgba(0,0,0, .15);
  color: white;
  margin: 80px auto;
  padding: 2rem;
  text-align: center;
  width: 80%;
}


.filebrowser-loading-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  .filebrowser-loading {
    position: relative;
    margin: auto;
    height: 100%;

    .filebrowser-loading-content {
      border-radius: $border-radius;
      text-align: center;
      background-color: rgba(0,0,0, .15);
      padding: 2rem;
      color: white;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border-radius: $border-radius;
      width: 250px;
      height: 100px;
      margin: auto
    }
  }
}

.filebrowser-toolbar {
  .pix-filebrowser-toolbar-selection-status {
    position: absolute;
    right: 2rem;
    top: 12px;
    border-right-width: 0 !important;
    color: $palette-text-light;

  }
}