.files-title {
  padding: 5px 0;
  font-size: 20px;
  letter-spacing: -0.5px;
}
.files-list {}
.files-list-item {
  @include no-underline();
  display: block;
  padding: 5px 8px;
  margin-left: -8px;
  margin-right: -8px;

  &.is-disabled {
    color: $dark-grey;
    cursor: default;
  }

  &-icon {
    width: 20px;
    height: 20px;
    float: left;
    position: relative;
    top: -1px;
  }

  &-info {
    margin-left: 30px;
  }

  &-title {
    //&-label {
    //  margin-right: 4px;
    //}

    //.is-author, .is-title {
    //  color: $fg;
    //}
  }

  &-subtitle {
    color: $grey;
  }
}
.files-list-item-title-label-external-icon {
  position: relative;
  top: 1px;
  color: $grey;
}

.files-list-item-title-label + .files-list-item-meta-item {
  margin-left: 4px;
}

.files-list-item-meta {
  padding: 2px 0;
  margin-left: -2px;
}
.files-list-item-meta-item {
  display: inline-block;
  margin-right: 5px;
  font-size: $fs - 5px;
  background-color: $hover-hl;
  color: transparentize($fg, 0.4);
  padding: 3px 4px;
  @include radius(4px);
  &:last-child { margin-right: 0px; }
}

.files-list-item:hover {
  text-decoration: none;
  background-color: $hover-hl;
  @include radius(3px);

  .files-list-item-meta-item {
    background-color: darken($hover-hl, 7%);
  }
}

.files-list-item-text-excerpt {
  font-size: $fs - 4px;
  font-family: monospace;
  margin-top: 4px;
  margin-bottom: 2px;
  color: $dark-grey;
  .matched {
    background-color: darken($hover-hl, 4%);
    @include radius(2px);
    color: $dark-grey;
  }
}

.files-search {
  position: relative;
  border: 1px $input-border solid;
  background-color: $input-bg;
  @include radius(4px);

  &.is-focused {
    border-color: $input-border-focused;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  }

  > input[type="text"] {
    width: 100%;
    background: none;
    border: 0;
    position: relative;
    z-index: 2;
    padding: 8px 8px 8px 34px;
  }

  &-wrap {
    padding-top: 6px;
    padding-bottom: $base-padding;
  }

  &-icon {
    color: $grey;
    position: absolute;
    left: 8px;
    top: 6px;
    z-index: 1;
  }

  &-clear-icon {
    color: $light-grey;
    position: absolute;
    width: 32px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    cursor: pointer;
    opacity: 0.8;
    > svg {
      position: absolute;
      top: 50%;
      left: 50%;
      // since we know that icon is 16x16, we can just use -8px here
      margin-left: -8px;
      margin-top: -8px;
    }
    &:hover {
      opacity: 1;
      color: $link-color;
    }
  }

  &-results-info {
    padding-top: 8px;

    &-inner {
      position: relative;
      background-color: $hover-hl;
      color: $fg;
      font-size: $fs - 2px;
      box-sizing: border-box;
      padding: 4px 8px;
      @include radius(4px);
    }

    &-spinner {
      display: none;
      position: absolute;
      left: 50%;
      top: 1px;
      margin-left: -20px;
    }

    &.is-loading &-spinner { display: block; }
  }
}

.files-list-show-more {
  text-align: center;
  padding: 10px;
  @include radius(4px);
  background-color: $hover-hl;
  margin-top: 8px;
  cursor: pointer;
  position: relative;

  &:hover {
    background-color: $hover-hl-darker;
  }
  &:active {
    background-color: darken($hover-hl-darker, 4%);
  }

  > .spinner {
    display: none;
    position: absolute;
    top: 7px;
    left: 50%;
    margin-left: -20px;
  }

  &.is-loading > .spinner { display: block; }
  &.is-loading > &-label { visibility: hidden; }
}