@import "compass/utilities/general/clearfix";
@import "compass/css3/border-radius";
//
@import "../../declarations/colors";

$iLegendIconSize: 20px;

div.legend {
  @include clearfix;

  width: 100%;
  height: 40px;
  margin-top: 20px;
  text-align: center;

  span {
    color: $white;
    display: inline-block;
    margin-right: 16px;
    width: auto;
    position: relative;
    padding-left: $iLegendIconSize + 4;
    padding-right: 8px;
    padding-top: 1px;
    cursor: pointer;

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

  span:before {
    @include border-radius($iLegendIconSize / 2);

    content: '';
    width: $iLegendIconSize;
    height: $iLegendIconSize;
    display: inline-block;
    background-color: #f00;
    position: absolute;
    top: 0;
    left: -2px;
  }

  span.blue:before {
    background-color: $blue;
  }
  span.turkis:before {
    background-color: $turkis;
  }
  span.green:before {
    background-color: $green;
  }
  span.yellow:before {
    background-color: $yellow;
  }
  span.orange:before {
    background-color: $orange;
  }
  span.red:before {
    background-color: $red;
  }
  span.pink:before {
    background-color: $pink;
  }
  span.grey:before {
    background-color: $grey;
  }
  span.white:before {
    background-color: $white;
  }
}

div.lifecycles {
  width: 100%;
  height: auto;
  overflow: auto;
  padding-bottom: 60px;

  div.memo {
    @include clearfix;

    width: 100%;
    height: 12px;
    margin-top: 11px;
    overflow: visible;

    div.change {
      //@include border-radius(12px);
      @include clearfix;

      float: left;
      min-width: 20px;
      height: 5px;
      border-top: solid 2px #fff;
      color: $white;
      text-align: center;
      overflow: visible;

      div.icon {
        @include border-radius(10px);

        float: right;
        background-size: 100%;
        background-color: $white_75;
        width: 20px;
        height: 20px;
        margin-top: -11px;
        cursor:pointer;
      }

      div.icon.deleted {
        cursor: pointer;
        background-image: url(../img/actions/deleted.png);
      }

      div.icon.restored {
        cursor: pointer;
        background-image: url(../img/actions/restored.png);
      }

      div.icon.position {
        background-image: url(../img/actions/move.png);
        //display:none;
      }

      div.icon.color.content.position {
        background-image: url(../img/actions/add.png);
        display: block;
      }

      div.icon.color {
        //background-image: url(../img/actions/color.png);
      }

      div.icon.content {
        background-image: url(../img/actions/edit.png);
      }

    }

    div.change.blue {
      border-color: $blue_75;

      div.icon {
        background-color: $blue;
      }
    }
    div.change.turkis {
      border-color: $turkis_75;
      div.icon {
        background-color: $turkis;
      }
    }
    div.change.green {
      border-color: $green_75;
      div.icon {
        background-color: $green;
      }
    }
    div.change.yellow {
      border-color: $yellow_75;
      div.icon {
        background-color: $yellow;
      }
    }
    div.change.orange {
      border-color: $orange_75;
      div.icon {
        background-color: $orange;
      }
    }
    div.change.red {
      border-color: $red_75;
      div.icon {
        background-color: $red;
      }
    }
    div.change.pink {
      border-color: $pink_75;
      div.icon {
        background-color: $pink;
      }
    }
    div.change.grey {
      border-color: $grey_75;
      div.icon {
        background-color: $grey;
      }
    }
    div.change.white {
      border-color: $white_75;
      div.icon {
        background-color: $white;
      }
    }
  }
}