@import "global";

$color-roadmap-border: $color-primary;
$width-roadmap: 4px;
$width-roadmap-item: $width-roadmap - 1;
$width-date: 120px;
$radius-roadmap: 10px;

.roadmap-container
{
  border-left: $width-roadmap solid $color-roadmap-border;
  margin: $spacing-vertical 0 $spacing-vertical $width-date;
  &:before, &:after
  {
    background: $color-roadmap-border;
    content: "";
    display: block;
    position: relative;
    height: $width-roadmap;
    left: -2 * ($width-roadmap + 1);
    width: $width-roadmap * 4;
  }
  &:before
  {
    top: -1 * ($width-roadmap);
  }
  &:after
  {
    bottom: -1 * ($width-roadmap);
  }
}

.show-all-roadmap-groups
{
  display: inline-block;
  margin: $spacing-vertical 0 0;
}

.roadmap-group-closed
{
  display: none;
}

$title-spur: 8 * $width-roadmap;

.roadmap-group-title
{
  &:before
  {
    border-top: $width-roadmap solid $color-roadmap-border;
    content: "";
    display: inline-block;
    height: $width-roadmap;
    margin-right: 10px;
    vertical-align: middle;
    width: $title-spur;
  }
  cursor: pointer;
  font-weight: 400;
  margin: $spacing-vertical * 2 0 $spacing-vertical * 1 0;
  padding: 0;
}

.roadmap-group-title-label
{
  background: $color-roadmap-border;
  @include border-radius($radius-roadmap);
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
  letter-spacing: 0;
  padding: 0 10px;
  text-align: center;
  width: calc(100% - #{$title-spur} - 20px);
}

.roadmap-item
{
  $left-margin: 20px;
  $item-padding: $spacing-vertical / 2;
  margin-bottom: $spacing-vertical;
  position: relative;
  margin-left: $left-margin;
  position: relative;
  padding: $item-padding;
  background: #f2f2f2;
  @include border-radius($radius-roadmap);
  &:before {
    border-top: $width-roadmap-item solid $color-roadmap-border;
    content: "";
    position: absolute;
    left: -1 * $left-margin;
    top: 0.5 * ($font-size-h3) + $item-padding;
    display: inline-block;
    margin-top: $width-roadmap-item / 2;
    height: $width-roadmap-item;
    width: 10px;
  }
}

.roadmap-item-date
{
  display: inline-block;
  position: absolute;
  top: 0;
  left: -1 * $width-date;
  color: $color-meta-light;
  line-height: 42px;
}

.roadmap-item-title
{
  display: inline-block;
  margin: 0;
}

.roadmap-item-content
{
  font-size: 0.9em;
  margin: 10px;
}
.roadmap-item-content a{@include anchor($color-primary);}
.roadmap-item-assignee
{
  float: right;
  font-size: 0.8em;
}
/*
.roadmap-item-closed .roadmap-item-content
{
  display: none;
}*/