/* ==========================================================================
   Config
   ========================================================================== */
$list-border: 1px solid $color-border-base;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-list {
  width: 100%;

  .gui-list {
    display: none;
    order: 3;
  }

  &.gui-is-active svg path,
  .gui-is-active & svg path {
    fill: $color-text-base;
  }

  .gui-is-active & .gui-item-row svg path {
    fill: $neutral-base;
  }
}

.gui-list__head {
  padding: $layout-spacing-base $layout-spacing-base 0 $layout-spacing-base;
  border-top: $list-border;
}

.gui-list__subtitle {
  font-size: $typo-size-small;
  text-transform: uppercase;
  color: $neutral-base;
  padding: $layout-spacing-base $layout-spacing-base 0 $layout-spacing-base;
}

.gui-list__head-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.gui-list__title {
  font-weight: $typo-weight-semi-bold;
}

.gui-list__body {
  margin: $layout-spacing-base*0.5;

  .gui-list__body {
    margin: 0;
  }
}

.gui-list__item {
  position: relative;

  &.gui-show-sub-list > .gui-list {
    display: block;
  }
}

.gui-list__item-content {
  position: relative;
  display: flex;
  align-items: center;
  padding: $layout-spacing-base*0.5;

  .gui-list .gui-list & {
    padding-left: $layout-spacing-base*1.5;
  }

  .gui-list .gui-list .gui-list & {
    padding-left: $layout-spacing-base*2.5;
  }

  .gui-list .gui-list .gui-list .gui-list & {
    padding-left: $layout-spacing-base*3.5;
  }

  .gui-is-current > & {
    background: $primary-blue-lightest;
    border-radius: 4px;

    & .gui-list__item-title,
    & .gui-list__item-title a {
      font-weight: 500;
      color: $primary-blue;
    }

    & .gui-color-overdue a {
      color: $primary-red;
    }
  }
}

.gui-list__actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  line-height: 0;
  order: 2;
}

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

.gui-list__button {
  padding: $layout-spacing-base*0.5 ($layout-spacing-base*0.5 - 2px);

  svg {
    transform: rotate(-90deg);
  }

  &.gui-is-active svg {
    transform: rotate(0deg);
  }
}

.gui-list__item-text {
  width: 100%;
  overflow: hidden;

  > a {
    text-decoration: none;
    color: inherit;
  }
}

/* ==========================================================================
   Modifiers
   ========================================================================== */
.gui-list--bordered-right {
  border-right: $list-border;
}

.gui-list--bordered-left {
  border-left: $list-border;
}

.gui-list--bordered .gui-list__head {
  padding: $layout-spacing-base;
  border-bottom: $list-border;
}

.gui-list--bordered .gui-list__body {
  margin: 0;
}

.gui-list--bordered .gui-is-current > .gui-list__item-content > .gui-list__item-text {
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: $primary-blue;
  }
}

.gui-list--bordered .gui-list__item-content {
  border-radius: 0;
  border-bottom: $list-border;
  padding-left: $layout-spacing-base;
  padding-right: $layout-spacing-base;
}

.gui-list__item--collapse .gui-list__item-content {
  padding: 0;
}

.gui-list__item--collapse .gui-list__actions {
  margin-right: $layout-spacing-base*0.5;
}