/*!
 * Copyright 2017 Banco Bilbao Vizcaya Argentaria, S.A.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.tile {
    background-color: $component-background-color;
    display: flex;
    height: 100%;

    &.component-wrapper, &.component-host {
      background:transparent;
      border: none;
      padding: none;
      margin: none;
    }
}

.component__content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    svg {
        * {
            transition: fill-opacity 0.3s ease-in-out,
                fill 0.3s ease-in-out,
                display 0.3s ease-in-out;
        }

        display: block;
        margin: 0 auto;
        height: 100%;
        width: 100%;
        max-width: 35vw;
        max-height: 90%;
    }
}

.component__header {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 10px;
    padding: 15px 15px 10px 15px;
    width: 100%;
}

.component__body {
    min-height: 0; /* min-height to prevent overflowing */
    padding: 5px 15px 15px 15px;
    flex-basis: 100%;
}

.title {
    font-weight: $title-weight;
    margin-bottom: 0;
    text-align: left;
    text-transform: $title-transform;
}

.title-desc {
    color: $dark-grey;
    margin: 0;
    text-align: right;
}


.indicator__bar {
  display: flex;
  clear: both;
  padding: 0;
  padding-bottom: 15px;
  width: 100%;

  &:last-child {
    padding-bottom: 0;
  }

  .indicator {
    line-height: 1em;
    text-align: center;
    flex: 1 1 auto;
    margin-left: 5px;

    &:first-child {
      margin-left: 0;
    }

    .stats{
        font-size: 2.15em;
        line-height: 0.9em;
    }

    .stat-desc{
        font-size: $level-5;
        padding: 0 3px;
    }

    .stat-important{
        font-size: $level-2;
    }

    &:nth-last-child(n+2):first-child {
      text-align: left;
      .stat-desc {
        padding-left: 0;
      }
    }

    &:nth-last-child(n+2) ~ :last-child {
      text-align: right;
      .stat-desc {
        padding-right: 0;
      }
    }
  }
}

.status__indicator {
  background-color: $dark-grey;
  border-radius: 50%;
  display: inline-block;
  height: 1.1rem;
  width: 1.1rem;
  margin: 0 3px 0 0;

  &.status__indicator-ok{
      background-color: $green;
  }

  &.status__indicator-error{
      background-color: $red;
  }

  &.status__indicator-warn{
      background-color: $yellow;
  }
}

.progress-bar {
  transform: skewX(-25deg);

  //Hack due to bootstrap styles coliding in firefox
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  height: 2.2rem;
  box-shadow: none;
  padding-right: 5px;
  display: block;

  .progress__bar {
    height: 1rem;
    box-sizing: border-box;
    float: left;
    display: block;


    &:nth-last-child(n+2) ~ .progress__bar {
      border-left: 2px solid $light-grey;
    }
  }
}

.progress-bar-fallback {
  text-align: center;
  height: 1.3rem;
  width: 100%;
  display: table;
  span {
    display: table-cell;
    line-height: 1.3rem;
  }
}

//Modules states backgrounds
$border-width: -5px;

.tile {
    &.module-ok {
        box-shadow: inset 0 $border-width 0 $darker-grey;
    }

    &.module-warning {
        box-shadow: inset 0 $border-width 0 $yellow;
    }

    &.module-error{
        box-shadow: inset 0 $border-width 0 $red;
    }

    &.module-warning--level-2, &.module-warning[data-size="l"], &.module-warning.tile--primary{
        @extend .module-warning;
        background: $module-warning-background !important;
    }

    &.module-error--level-2, &.module-error[data-size="l"], &.module-error.tile--primary{
        @extend .module-error;
        background: $module-error-background !important;
    }

    &.module-ok--level-2, &.module-ok[data-size="l"], &.module-ok.tile--primary {
        @extend .module-ok;
        background: $module-ok-background !important;
    }

}

tile-container.module-data-error {
    position: relative;

    > * {
        -webkit-filter: blur(5px); /* Safari */
        filter: blur(5px);
        position: relative;
        opacity: 0.5;
    }

    &:before{
        content: "Server error";
        color: #fff;
        position: absolute;
        width: 100%;
        text-align: center;
        top: 49%;
        left: 0;
    }
}

//LEGENDS
.legend{
    align-items: center;
    color: $dark-grey;
    display: flex;
    flex-grow: 0;
    flex-wrap: wrap;
    font-size: $level-5;
    justify-content: center;
    margin: 0 auto;
    padding: 0 10px 20px 10px;
}

.legend__item{
    padding: 0 10px;
}

//Sprints
.legend__color{
    background-color: $dark-grey;
    border-radius: 5px;
    display: inline-block;
    height: 7px;
    margin: 0 7px 0 0;
    position: relative;
    top: -0.2em;
    width: 12px;
}

.legend__color--grey{
    background-color: $light-grey;
}

.legend__color--dashed{
  background-color: transparent;
  border: 1.5px dashed $darker-grey;
}

.legend__color--green{
  background-color: $green;
}

.legend__color--blue{
    background-color: $blue;
}

.legend__color--red{
    background-color: $red;
}
.legend__color--yellow{
    background-color: $yellow;
}

// RESPONSIVE
@media all and (min-width: $l) {
    .tile{
        margin: 0 auto;
        max-width: 100%;
    }
    .subtitle {
        margin: 0 0 0 0;
    }
    tile-container.module-data-error {
        &:before{
            content: "Server error";
            font-size: $level-2;
        }
    }
    .indicator {
        font-size: $level-3;

        .stats{
            font-size: $level-1 - 1.6;
        }
    }
}

@media all and (min-width: $xl){

}

@media all and (min-width: $xxl) {
    .tile{
        margin: 0 auto;
    }

    .subtitle {
        margin: 0 0 30px 0;
    }
}

@mixin reduce-header() {
    .title {
        font-size: $level-3;
    }

    .title-desc {
        font-size: $level-5;
    }
}

svg {

  .innerData {
    pointer-events: none;
    text-align: center;
    span {
      white-space: nowrap;
    }

    .rate-completed {
      font-size: 260px;
      line-height: 240px;

      span {
        font-size: 200px;
      }
      .note {
        font-size: 100px;
        vertical-align: super;
        margin-left: -30px;
        line-height: 0;
      }
    }

    .text-completed {
      font-size: 60px;
      line-height: 55px;
      span {
        font-size: 83px;
        font-weight: 300;
      }
    }

    .days-left {
      font-size: 71px;
      bottom: 0;
    }
  }

  path {
    fill: $svg-path-fill;

    &.status-in-progress {
      fill: $blue;
    }

    &.status-done {
      fill: $green;
    }

    &.status-to-rework {
      fill: $red;
    }

    &.status-backlog {
      fill: $neutral;
    }

    &.status-impeded {
      fill: $red;
    }

    &.status-bad {
      fill: $red;
    }

    &.status-good {
      fill: $yellow;
    }

    &.status-excellent {
      fill: $green;
    }

    &.status-hidden {
      fill: transparent;
    }
  }
}

.status-in-progress {
  color: $blue;
}

.status-done {
  color: $green;
}

.status-to-rework {
  color: $red;
}

.status-impeded {
  color: $red;
}

.status-bad {
  color: $red;
}

.status-good {
  color: $yellow;
}

.status-excellent {
  color: $green;
}

.fill-in-progress {
  background-color: $blue;
}

.fill-done {
  background-color: $green;
}

.fill-to-rework {
  background-color: $red;
}

.fill-impeded {
  background-color: $red;
}

.fill-bad {
  background-color: $red;
}

.fill-good {
  background-color: $yellow;
}

.fill-excellent {
  background-color: $green;
}

.fill-backlog {
  background-color: $light-grey;
}

.fill-remain {
  border: 1px dashed $darker-grey;
}

.fill-generic-0 {
  background-color: #2DCCCD;
}
.fill-generic-1 {
  background-color: #8F7AE5;
}
.fill-generic-2 {
  background-color: #D8BE75;
}
.fill-generic-3 {
  background-color: #0073D0;
}
.fill-generic-4 {
  background-color: #F78BE8;
}
.fill-generic-5 {
  background-color: #F35E61;
}
.fill-generic-6 {
  background-color: #277A3E;
}
.fill-generic-7 {
  background-color: #8E7022;
}
.fill-generic-8 {
  background-color: #AD53A1;
}
.fill-generic-9 {
  background-color: #6754B8;
}

.tendency {

  &::before {
    content: '~';
    display: inline-block;
    font-size: 1.5rem;
    padding-right: 4px;
    position: relative;
    width: 0.9vw;
  }

  &.tendency-oneup::before {
    content: url(../img/top_arrow.svg);
  }

  &.tendency-twoup::before {
    content: url(../img/top_arrow_double.svg);
  }

  &.tendency-threeup::before {
    content: url(../img/top_arrow_triple.svg);
  }

  &.tendency-onedown::before {
    content: url(../img/down_arrow.svg);
  }

  &.tendency-twodown::before {
    content: url(../img/down_arrow_double.svg);
  }

  &.tendency-threedown::before {
    content: url(../img/down_arrow_triple.svg);
  }

  &.tendency-oneup-red::before {
    content: url(../img/top_arrow_red.svg);
    width: 16px;
    display: inline-block;
  }

  &.tendency-twoup-red::before {
    content: url(../img/top_arrow_double_red.svg);
    width: 16px;
    display: inline-block;
  }

  &.tendency-threeup-red::before {
    content: url(../img/top_arrow_triple_red.svg);
    width: 16px;
    display: inline-block;
  }

  &.tendency-onedown-green::before {
    content: url(../img/down_arrow_green.svg);
    width: 16px;
    display: inline-block;
  }

  &.tendency-twodown-green::before {
    content: url(../img/down_arrow_double_green.svg);
    width: 16px;
    display: inline-block;
  }

  &.tendency-threedown-green::before {
    content: url(../img/down_arrow_triple_green.svg);
    width: 16px;
    display: inline-block;
  }

}

.simple-component {
  .title {
    font-size: .95vw !important;
  }
  .title-desc {
    color: white;
    font-weight: inherit;
    margin-bottom: 0;
    text-align: right;
    text-transform: none;
    font-size: .95vw !important
  }
  .component__body {
    padding: 10px 15px 5px 15px;
  }
}