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

$status-indicator-circle-size: $typo-size-small !default;
$status-indicator-circle-small: $typo-size-micro !default;
$status-indicator-horizontal-margin: 0.5rem !default;
$status-indicator-bordered-border: 1px solid $color-background-light !default;
$status-indicator-margin-left: 1.3rem !default;

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

.gui-status-indicator {
  color: $color-brand-dark;
  white-space: nowrap;
  font-size: $typo-size-base;
}

.gui-status-indicator__label-row {
  display: flex;
  align-items: center;
}

.gui-status-indicator__children {
  color: $color-text-light;
  font-size: $typo-size-slight;
  margin-left: $status-indicator-margin-left;
  font-weight: $typo-weight-roman;
  margin-top: $layout-spacing-base * 0.25;
}

.gui-status-indicator__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: $status-indicator-circle-size;
  width: $status-indicator-circle-size;
  height: $status-indicator-circle-size;

  &--large {
    height: 16px;
    width: 16px;
  }

  + .gui-status-indicator__label {
    margin-left: $layout-spacing-base * 0.5;
  }
}

.gui-status-indicator__label {
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5rem;
  overflow: hidden;

  &-wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
    margin-left: $layout-spacing-base * 0.5;
  }

  .gui-status-indicator__label-text {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: bottom;
    text-align: left;
    max-width: 100%;
  }

  .gui-tooltip-wrapper__child {
    display: inline-flex;
  }
}

.gui-status-indicator--completed {
  .gui-status-indicator__label,
  .gui-status-indicator__children .gui-workflow-item__text,
  .gui-status-indicator__children .gui-duedate__button,
  .gui-status-indicator__label-text {
    text-decoration: line-through;
    font-style: italic;
    color: $color-text-light;
  }

  .gui-status-indicator__circle {
    background-color: $color-text-light;
  }
}

.gui-status-indicator--bordered {
  border-bottom: $status-indicator-bordered-border;
  padding-bottom: math.div($layout-spacing-base, 1.3);
}

.gui-status-indicator__pre-text {
  margin-right: math.div($layout-spacing-base, 3);
}

.gui-status-indicator__description {
  white-space: initial;
  color: $color-brand-dark;
  margin-top: $layout-spacing-base * 0.25;
  margin-left: $status-indicator-margin-left;
  margin-bottom: math.div($layout-spacing-base, 2.5);
}

.gui-icon.gui-status-indicator__readonly {
  margin-left: $layout-spacing-base * 0.25;
  vertical-align: top;

  path {
    fill: $color-brand-dark;
  }
}

.gui-status-indicator__actions {
  margin-left: $layout-spacing-base * 0.5;
}

/* ==========================================================================
   Modifiers
   ========================================================================== */
.gui-status-indicator--small .gui-status-indicator__circle {
  width: $status-indicator-circle-small;
  height: $status-indicator-circle-small;

  + .gui-status-indicator__label {
    margin-left: math.div($layout-spacing-base, 3);
  }
}

.gui-status-indicator--small .gui-status-indicator__label {
  font-size: $typo-size-slight;
}

.gui-status-indicator--soft-label .gui-status-indicator__label {
  font-size: $typo-size-slight;
  font-weight: $typo-weight-roman;
}

.gui-status-indicator--medium .gui-status-indicator__label {
  font-size: $typo-size-base;
}

.gui-status-indicator--row {
  display: flex;
  align-items: baseline;
  background: white;
  border: $status-indicator-bordered-border;
  padding: $layout-spacing-base * 0.5;
  border-radius: 4px;
  margin: 0 0 $layout-spacing-base * 0.5;

  .gui-status-indicator__children {
    margin: 0 0 0 auto;
  }
}