.file-manager {
  width: 100%;
  height: 280px;
  background: #f5f5f5;
  box-shadow:
    20px 20px 60px #bebebe,
    -20px -20px 60px #ffffff;
  box-sizing: border-box;

  border-radius: 14px;
  overflow: hidden;

  &__head {
    display: flex;
    font-size: 12px;
    border-bottom: 1px solid #e0e0e0;
    padding: 4px;
  }

  &__head-name {
    width: 35%;
    padding: 8px;
  }

  &__head-date {
    width: 25%;
    padding: 8px;
  }

  &__head-type {
    width: 20%;
    padding: 8px;
  }

  &__head-size {
    width: 20%;
    padding: 8px;
  }

  &__table-item {
    display: flex;
    font-size: 12px;
    transition: background-color 0.15s ease-in-out;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;

    &:hover {
      background: #e0e0e0;
    }
  }

  &__table-item-name {
    width: 35%;
    padding: 8px;

    span {
      padding-left: 5px;
      font-size: 10px;
    }
  }

  &__table-item-date {
    width: 25%;
    padding: 8px;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &__table-item-type {
    width: 20%;
    padding: 8px;
  }

  &__table-item-size {
    width: 20%;
    padding: 8px;
  }

  &__nested {
    .file-manager__table-item {
    }
  }

  &__table-item-sub {
    padding-left: 5px;
    margin-bottom: 20px;

    //.file-manager__table-item-name {
    //  padding-left: 20px;
    //}
  }

  &--dark {
    background: #282828;
    box-shadow:
      20px 20px 60px #131313,
      -20px -20px 60px #1c1c1c;
    border: 1px solid #2c2c2c;

    .file-manager__head {
      border-bottom: 1px solid #3c3c3c;
    }

    .file-manager__table-item {
      border-bottom: 1px solid #3c3c3c;
    }

    .file-manager__table-item:hover {
      background: #3c3c3c;
    }
  }
}
