/*!
 * 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.
 */

.builds{
   // align-items: stretch;

    path.slice{
        stroke-width:2px;
    }

    polyline{
        opacity: .3;
        stroke: black;
        stroke-width: 2px;
        fill: none;
    }

    .gauge-title {
        text-transform: uppercase;
        text-decoration: underline;
    }

}

.build-status{
    font-size: $level-3;
    font-weight: 400;
    text-align: center;
}

.build-info {
    text-align: center;
    pointer-events: none;
    overflow: visible;

    .status {
        font-size:90px;
        line-height: 95px;
    }

    .project {
        font-size: 25px;
    }

    .box {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        word-break: break-all;
        margin-top: 20px;
        &, span {
          font-size: 25px;
          line-height: 40px;
        }
    }

    .date {
        display: block;
        font-size: 40px;
        line-height: 45px;
    }

    .duration {
        font-size: 40px;
        line-height: 50px;
        text-align: center;
    }

    .culprits {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        word-break: break-all;
        font-size: 25px;
        line-height: 40px;
    }

}

.build-result {
    fill: $svg-path-fill;
}

.build-result.clickable {
    cursor: pointer;
}

.status-success {
    color: $green;
}

.status-failure {
    color: $red;
}

.status-inprogress {
    color: $blue;
}

.status-unstable {
    color: $yellow;
}

svg .status-success {
    fill: $green;
}

svg .status-aborted {
    fill: $dark-grey;
}

svg .status-failure {
    fill: $red;
}

svg .status-inprogress {
    fill: $blue;
}

svg .status-unstable {
    fill: $yellow;
}

.slices path:hover, .slices.select path.selected {
    stroke: rgba(255,255,255,0.4);
    stroke-width: 3px;
}

.legend__build-item{
    background-color: $dark-grey;
    border-radius: 5px;
    display: inline-block;
    height: 4px;
    margin: 0 7px 0 0;
    position: relative;
    width: 20px;
}

.legend__build-item--product{
    border-radius: 5px;
    height: 15px;
    top: 0.06em;
    width: 15px
}

.legend__build-item--repos{
    height: 10px;
    top: -0.05em;
}

.legend__build-item--branches{
    top: -0.2em;
}
