//name, width, min-width, padding-right, text-align
$columns: (
                ('thumbnail', 137px, 137px, 30px, center),
                ('name', 32.083%, 385px, 30px, center),
                ('tag', 17.333%, 208px, 50px, right),
                ('in-use', 7.5%, 90px, 30px, center),
                ('owner', 12.5%, 150px, 30px, center),
                ('update', 9.166%, 110px, 30px, center),
                ('size', 5%, 60px, 30px, center),
);

$navigation-bar-height: 50px;
$breadcrumb-height: 50px;
$search-height: 60px;
$contents-item-icon-size: 19px;
$contents-item-icon-margin-right: 15px;

.contents-wrapper {
  padding: 0 40px 30px 40px;
  height: calc(100vh - #{$navigation-bar-height + $search-height});
  overflow-y: scroll;
}

.contents {
  position: relative;

  &-breadcrumb {
    height: $breadcrumb-height;
    font-size: 14px;
    text-align: left;
    color: $color-primary-text;
    padding: 15px 0;
    display: inline;

    &-item {
      @extend .contents-breadcrumb;
      display: inline-block;
      cursor: pointer;

      &:hover {
        span {
          background-color: $color-hover-background;
        }
      }

      &-arrow {
        margin: 0 10px;
        @include breadcrumb-arrow;
        @include size(20px);
        float: right;
      }
    }

    &-item:last-child {
      cursor: default;

      &:hover {
        span {
          background-color: transparent;
        }
      }
    }
  }

  &-search-result {
    @extend .contents-breadcrumb;
    display: inline-block;
    cursor: default;

    &-count {
      font-weight: 600;
      color: #2e3ab1;
    }
  }

  &-table {
    position: relative;
    height: 100%;
    border-spacing: 0;
    border-collapse: collapse;

    tr {
      cursor: default;
    }
  }

  &-drop-area {
    position: absolute;
    width: 100%;
    left: 0;
    border: 1px solid $color-accent-text;
    background-color: rgba(92, 101, 192, 0.1);
    pointer-events: none;
  }

  &-drop-message {
    @include align-center-both;
    $width: 272px;

    position: fixed;
    min-width: $width;
    height: 40px;
    left: calc(50% - #{$width / 2});
    bottom: 20px;
    font-size: 13px;
    color: white;
    background-color: $color-accent-sub;
    padding: 0 10px;
  }

  @each $column in $columns {
    &-#{nth($column, 1)} {
      width: nth($column, 2);
      min-width: nth($column, 3);
      padding-right: nth($column, 4);
      text-align: nth($column, 5);
    }
  }

  &-item {
    @mixin type {
      @include size($contents-item-icon-size);
      float: left;
      margin-right: $contents-item-icon-margin-right;
    }

    &:hover {
      background-color: #fafafa;

      & > td:last-child > div, > td:first-child > div {
        display: flex;
      }
    }

    &--selected {
      background-color: rgba(92, 101, 192, 0.3);

      &:hover {
        > td:last-child > div, > td:first-child > div {
          display: flex;
        }
      }
    }

    & > td, &--selected > td {
      position: relative;
      height: 61px;
      padding: 0 30px 0 0;
      text-align: center;
      font-size: 13px;
      color: #333333;
      border-bottom: 1px #eeeeee solid;
    }

    &__type--image {
      @include image;
      @include type;
    }

    &__type--video {
      @include video;
      @include type;
    }

    &__type--playlist {
      @include playlist;
      @include type;
    }

    &__type--scene {
      @include scene;
      @include type;
    }

    &-preview {
      display: none;
      justify-content: center;
      align-items: center;
      @include size(calc(100% - 30px), 100%);
      position: absolute;
      background-color: rgba(0, 0, 0, 0.3);
      cursor: pointer;

      &__play {
        @include play;
        @include size(25px, 18px)
      }
    }

    &__thumbnail {
      /* do not optimize background property because of background-image in style attribute */
      @include size(100%);
      @include thumbnail;
    }

    &__name {
      @include ellipse-text;
      text-align: left;

      &--new {
        @include ellipse-text;
        width: calc(100% - #{$contents-item-icon-size} - #{$contents-item-icon-margin-right});
        font-size: 13px;
        border: none;
        outline: none;
        justify-content: flex-start;
        display: flex;

        &:focus {
          border-color: $color-light-purple;
          outline: none;
        }
      }
    }

    &__tag {
      @include ellipse-text;
      text-align: right;
    }

    &__name-highlight {
      font-weight: 600;
      color: #2e3ab1;
    }

    &__trash-can {
      display: none;
      @include trash-can;
      @include size(25px);
      cursor: pointer;
    }
  }
}

.folder {
  &-item {
    @mixin type {
      @include size($contents-item-icon-size);
      float: left;
      margin-right: $contents-item-icon-margin-right;
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.03);
    }

    &--selected {
      background-color: rgba(92, 101, 192, 0.3);
    }

    & > td, &--selected > td {
      position: relative;
      height: 41px;
      padding: 0 30px 0 0;
      text-align: center;
      font-size: 13px;
      color: #333333;
      border-bottom: 1px #eeeeee solid;
    }

    &-wrapper {
      @include size(100%);
      @include align-center-both;

      &-shadow {
        width: calc(100% - 30px);
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fafafa;
        z-index: -1;
      }
    }

    &-icon {
      /* do not optimize background property because of background-image in style attribute */
      @include folder;
      @include size(19px, 15px);
    }

    &-name {
      @include ellipse-text;
      text-align: left;
      &--new {
        @include ellipse-text;
        width: 100%;
        font-size: 13px;
        border: none;
        outline: none;
        justify-content: flex-start;
        display: flex;

        &:focus {
          border-color: $color-light-purple;
          outline: none;
        }
      }
    }

    &__trash-can {
      @include trash-can;
      @include size(25px);
      cursor: pointer;
    }
  }
}