/* ==========================================================================
   Config
   ========================================================================== */
$collections-table-spacing: $layout-spacing-base*0.25 0 !default;
$collections-table-status-spacing: $layout-spacing-base * 0.5 !default;
$collections-table-content-padding: $layout-spacing-base*0.25 $layout-spacing-base*0.5 !default;
$collections-table-border: 1px solid $color-border-base !default;
$collections-table-selected-border: 2px solid $primary-blue !default;
$collections-table-border-radius: 4px !default;
$collections-table-cell-min-height: 40px !default;

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

.gui-collections-table {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 auto;
  color: $neutral-base;

  a {
    @include link-hover-underline;

    &.gui-text-decoration-hover-none {
      text-decoration: none;
    }
  }

  .gui-dropdown__content {
    color: $neutral-dark;
  }
}

.gui-collections-table__row {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  flex-shrink: 0;
  padding: $collections-table-spacing;
}

.gui-collections-table__heading,
.gui-collections-table__cell {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  flex-basis: 0;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  white-space: nowrap;

  &:first-child {
    flex-basis: 10%;

    @include respond-to-min($screen-md) {
      flex-basis: 20%;
    }
  }
}

.gui-collections-table__cell {
  border: $collections-table-border;
  border-width: 1px 0;
  padding: $collections-table-spacing;
  background: white;
  min-height: $collections-table-cell-min-height;

  &:first-child {
    padding-left: 1px;
    border-width: 1px 0 1px 1px;
    border-radius: $collections-table-border-radius 0 0 $collections-table-border-radius;
  }

  &:last-child {
    padding-right: 1px;
    border-width: 1px 1px 1px 0;
    border-radius: 0 $collections-table-border-radius $collections-table-border-radius 0;
  }
}

.gui-collections-table__cell-content {
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 $layout-spacing-base*0.5;
  width: 100%;

  .gui-collections-table__cell-content {
    padding: 0;
  }

  .gui-figure {
    width: $layout-spacing-base*2;
    height: $layout-spacing-base*2;
    padding: 0;
    margin: 0;
    flex-shrink: 0;

    &__loader {
      transform: none;
    }

    &__title {
      font-size: $typo-size-slight;
    }

    + .gui-collections-table__row-title {
      margin-left: $layout-spacing-base*0.5;
    }
  }

  .gui-editable-text__wrapper--editing,
  .gui-editable-text__text  {
    width: 100%;
    align-self: center;
  }

  .gui-editable-text__wrapper {
    max-width: 100%;
    padding-right: $layout-spacing-base * 2 + $layout-spacing-base*0.25;
  }
}

.gui-collections-table__input {
  width: 100%;
  border: none;
}

.gui-collections-table__heading {
  font-size: $typo-size-slight;
  font-weight: bold;
  padding-top: $layout-spacing-base*0.25;

  &:first-child {
    padding-left: 1px;
  }

  &:last-child {
    padding-right: 1px;
  }
}

.gui-collections-table__status-indicator {
  margin: 0 $collections-table-status-spacing 0 0;
}

.gui-collections-table__row-title {
  margin: 0;
  font-size: $typo-size-base;
  font-weight: $typo-weight-roman;
  color: $neutral-dark;

  a {
    color: $neutral-dark;
    text-decoration: none;
  }
}

/* ==========================================================================
   Modifiers
   ========================================================================== */
.gui-collections-table__row--selected {
  .gui-collections-table__cell {
    border: $collections-table-selected-border;
    border-width: 2px 0;
    padding: ($layout-spacing-base*0.25 - 1) 0;

    &:first-child {
      padding-left: 0;
      border-width: 2px 0 2px 2px;
    }

    &:last-child {
      padding-right: 0;
      border-width: 2px 2px 2px 0;
    }
  }
}

.gui-collections-table__cell--align-right .gui-collections-table__cell-content {
  justify-content: flex-end;
}

.gui-collections-table__cell--allow-overflow,
.gui-collections-table__cell-content--allow-overflow {
  overflow: visible;
}

.gui-content-items__table--disable-selected .gui-collections-table__row--selected,
.gui-collections-table__row--disabled {
  opacity: 0.5;
}

.gui-collections-table__row--is-over.dragged-top,
.gui-collections-table__row--is-over.dragged-below {
  position: relative;

  .gui-collections-table__cell:first-child {
    &::before {
      content: ' ';
      border-bottom: 2px solid $primary-blue;
      left: 0;
      width: 100%;
      position: absolute;
    }
  }

  &::before,
  &::after {
    content: ' ';
    position: absolute;
    width: 6px;
    height: 6px;
    background: $primary-blue;
    border-radius: $layout-spacing-base;
    left:0;
  }

  &::after {
    right: 0;
    margin-left: auto;
  }
}

.gui-collections-table__row--is-over {
  &.dragged-top {
    .gui-collections-table__cell:first-child::before {
      top: -1px;
    }

    &::before,
    &::after {
      top: -3px
    }
  }

  &.dragged-below {
    .gui-collections-table__cell:first-child::before {
      bottom: -1px;
    }

    &::before,
    &::after {
      bottom: -3px
    }
  }
}

.gui-drag-preview {
  .gui-collections-table__cell {
    border: $collections-table-border;
    border-radius: $collections-table-border-radius;
  }
}