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

.applications{

    a, a:hover, a:visited {
        color: inherit;
        text-decoration: none;
    }

    font-size: 2rem;
    text-align: center;

    .platform-rates {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

      .platform-rate:last-child {
          margin-bottom: 0;
      }
    }

    .platform-rate {
        margin: 5px auto;

        .rate__os {
            -webkit-text-stroke-color: #b3b3b3;
            -webkit-text-stroke-width: 1px;
            -webkit-text-fill-color: $component-background-color;

            font-size: 1.2em;
            padding-right: 8px;
        }

        .tendency:before {
            position: relative;
            top: -0.1em;
        }

        .rate__total-data {
            color: $dark-grey;
            font-size: 1.5rem;

            .fa {
                padding-right: 4px;
            }
        }
    }

    .no-reviews-in-short-term {
      filter: opacity(.1);
    }

}


.reviews {

    font-size: 2rem;

    .page-control {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      button.control {
        border-radius: 1rem;
        width: 2.1rem;
        height: 2.1rem;
        border: none;
        background-color: $light-grey;
        text-align: center;
        font-size: 1rem;
        color: $dark-grey;
        float:right;
        margin-left: 5px;
        padding: 0;
      }
      button.control.play {
        background-color: $text-color;
        color: $subtile-background-color;
        padding-left: 2px;
      }

    }


    .component__body {
        text-align: left;
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

    .review {
        cursor: pointer;

        &:hover .review-contents{
            background-color: lighten($color: $subtile-background-color, $amount: 1) ;
        }
    }

    .review__header{
      color: $dark-grey;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
    }

    .review__name {
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      overflow:hidden;
      max-width: 70vw;
    }

    .reviews-list {
        margin: 0 -7.5px;
    }

    .review__rate {

        .rate {
            padding-left: 5px;

            .fa{
                padding-right: 4px;
            }
        }
    }

    .review__comment {
        color: $text-color-secondary;
        height: 100%;
    }

    .review-contents {
      height: 100%;
      display: flex;
      flex-direction: column;
      margin: 0 7.5px;
      padding: 10px;
      height: 100%;
      box-sizing: border-box;

      &.mood-happy {
          box-shadow: inset 0 $border-width 0 $green;
      }

      &.mood-normal {
          box-shadow: inset 0 $border-width 0 $darker-grey;
      }

      &.mood-sad {
          box-shadow: inset 0 $border-width 0 $yellow;
      }

      &.mood-very-sad{
          box-shadow: inset 0 $border-width 0 $red;
      }
    }
}

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

    .applications {

        .component__body {
            display: inline-block;
        }
        .platform-rate{
            font-size: $level-3 + 0.2;

            .rate__total {
                .fa {
                    font-size: $level-2 + 0.2;
                }

            }

            .rate__tag {
                font-size: $level-2 - 0.2;

            }

            .rate__total-data {
                font-size: $level-2 - 0.3;

                .fa {
                    padding-right: 2px;
                }
            }
        }
    }

    .reviews .page-control {

      button.control {
        border-radius: 1em;
        width: 2.1em;
        height: 2.1em;
        font-size: 0.6vw;
      }

    }

    .reviews-list {
        font-size: $level-4 - 0.1;
        display: grid;
        grid-row-gap: 10px;
        height: 100%;

        .review-contents {
            overflow: hidden;
            min-height: 80px;
        }

        .review__header{
            font-size: $level-5;
        }

        .review__rate {
            margin: 5px 0 5px 0;
            line-height: 0.7em;

            .fa{
                font-size: $level-2 + 0.2;
            }

            > .fa {
                -webkit-text-stroke-color: #b3b3b3;
                -webkit-text-stroke-width: 1px;
                -webkit-text-fill-color: $subtile-background-color;
            }
        }

        .review__comment {
            overflow: hidden;
            text-align: justify;
            word-break: break-all;
            word-break: break-word;
            height: 100%;

            p {
                font-size: $level-5;
                margin: 0;
            }
        }

        .review {
          flex: 1 1 50%;
          overflow: hidden;
          min-width: 15vw;
        }

        .review__name {
          max-width: 9vw;
        }

        &.layout-1x1, &.layout-1x2 {
            grid-template-columns: 1fr;
        }

        &.layout-2x1, &.layout-2x2 {
            grid-template-columns: 1fr 1fr;
        }

        &.layout-3x1, &.layout-3x2{
            grid-template-columns: 1fr 1fr 1fr;
        }

        &.layout-3x2,
        &.layout-4x2{
            grid-template-rows: 1fr 1fr;
        }

        &.layout-4x1, &.layout-4x2{
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }

        .review:nth-last-child(n+3),
        .review:nth-last-child(n+3) ~ .review {
          flex-basis: 33.33%;
        }

        .review:nth-last-child(n+4),
        .review:nth-last-child(n+4) ~ .review {
          flex-basis: 50%;
        }

        .review:nth-last-child(n+6),
        .review:nth-last-child(n+6) ~ .review {
          flex-basis: 33.33%;
        }

        .review:nth-last-child(n+8),
        .review:nth-last-child(n+8) ~ .review {
          flex-basis: 25%;
        }

    }
}

@media all and (min-width: $xl){
    .reviews {
        .review__rate {
            font-size: $level-2 + 1;
            padding-right: 2px;
        }
    }
}

.tile {
    simple-markets {
        margin: 0;
    }
}