/* ==========================================================================
   Config
   ========================================================================== */

$folder-row-spacing: $layout-spacing-base * 0.5 !default;
$folder-row-gap: 6px;

/* ==========================================================================
   Styles
   ========================================================================== */

.gui-folder-row {
  overflow: hidden;
  width: 100%;
}

.gui-folder-row__inner,
.gui-folder-row__inner > *,
.gui-folder-row__aside > * {
  display: flex;
  align-items: center;
}

.gui-folder-row__inner {
  padding: $folder-row-spacing;
  background: $neutral-lightest;
  position: relative;
  margin: $folder-row-gap 0 $folder-row-gap;

  @include before-border(1px, solid, $neutral-light, 4px);

  + .gui-folder-row {
    margin-top: $folder-row-spacing;
  }
}

.gui-folder-row__inner-dragged-insert {
  @include before-border(2px, solid, $primary-blue, 4px);
}

.gui-folder-row__backdrop {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;

  > * {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.gui-folder-row__name {
  z-index: 1;
  white-space: nowrap;
  font-weight: $typo-weight-semi-bold;
  overflow: hidden;

  .gui-editable-text__wrapper--editing {
    width: calc(100% - #{$editable-text-wrapper-icon-width});
  }

  .gui-editable-text__text {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .gui-editable-text__wrapper {
    cursor: text;
  }
}

.gui-folder-row__aside {
  margin-left: auto;
  z-index: 1;
}

.gui-folder-row__cell {
  margin-left: $folder-row-spacing * 2;

  &:first-child {
    margin-left: 0;
  }
}

.gui-folder-row__actions {
  margin: 0 $layout-spacing-base * 0.5 0 0;
}

.gui-folder-row__action {
  padding: 0 0 0 $folder-row-spacing;
}

.gui-folder-row__toggle {
  display: inline-flex;

  button {
    height: $layout-spacing-base;
    width: $layout-spacing-base;
    border-radius: $border-radius-base;

    .gui-icon {
      transform: rotate(-90deg);
    }
  }

  button:hover,
  button:focus {
    background: rgba($primary-blue, 0.05);
  }
}

/* ==========================================================================
   Modifiers
   ========================================================================== */

.gui-folder-row--open .gui-folder-row__inner {
  box-shadow: $shadow-base-offset;
}

.gui-folder-row--open .gui-folder-row__toggle {
  button .gui-icon {
    transform: rotate(0deg);
  }

  path {
    fill: $primary-blue;
  }
}

.gui-folder-row__cell--meta {
  font-size: $typo-size-slight;
  color: $neutral-base;
  white-space: nowrap;

  @include respond-to-max($screen-xs-min) {
    display: none;
  }
}

.gui-folder-row__contents--highlight {
  &::before {
    background: $primary-blue;
  }
}