/* ==========================================================================
   Config
   ========================================================================== */
@use "sass:math";

$item-row-stacked-margin: math.div($typo-size-slight, 3);
$item-row-gap: 6px;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-item-row {
  padding: $layout-spacing-base * 0.5;
  cursor: pointer;
  background-color: white;
  position: relative;
  margin: $item-row-gap 0 $item-row-gap;
  width: 100%;

  .gui-status-indicator {
    display: inline-flex;
  }
}

.gui-item-row,
.gui-item-row__name,
.gui-item-row__aside,
.gui-item-row__data {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.gui-item-row__name {
  margin-right: $layout-spacing-base * 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;

  a {
    color: $color-text-base;
    text-decoration: none;

    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }

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

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

.gui-item-row__aside {
  margin-left: auto;
  color: $neutral-base;
  font-size: $typo-size-slight;

  .gui-avatar__initials {
    color: $neutral-base;
  }
}

.gui-item-row__data {
  margin-right: $layout-spacing-base;

  &:last-child {
    margin-right: 0;
  }
}

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

.gui-item-row--stacked {
  display: flex;
  flex-wrap: wrap;
  font-size: $typo-size-slight;

  .gui-item-row__name,
  .gui-item-row__aside,
  .gui-item-row__data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 $item-row-stacked-margin;
    width: 100%;

    &:last-child {
      margin: 0;
    }
  }
}

.gui-item-row-list {
  @apply my-0 pl-2 py-2 pr-0 border-solid border-l-0 border-r-0 border-t border-b border-neutral-90;

  margin-top: -1px;

  .gui-item-row__name {
    @apply mr-0 leading-6;
    @include gradient-overflow(rgba(255, 255, 255, 1));
  }
}

.gui-item-row--bordered {
  @include before-border(1px, solid, $color-border-base, $border-radius-base);
}