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

alerts-tile {
  overflow: hidden;

  &.tile.module-ok {
    box-shadow: none;
  }
}

.alerts__content {
  text-align: center;

  .title {
    color: $alerts-header-color;
  }

  .title-desc {
    color: white;
    font-weight: inherit;
    margin-bottom: 0;
    text-align: right;
    text-transform: none;
    font-size: .95vw !important
  }

  .component__body {
    display: block;
    padding: 5px 10px 10px;
  }

  .component__body {
    display: block;
    padding: 5px 15px 10px;
  }

  .alerts-list {
    padding-left: 0;
    margin: 0;
    list-style: none;
  }

  .alerts-list__group {
    border-bottom: 1px solid #333;
    margin: 10px 0 10px 0;
    display: table;
    border-collapse: collapse;
    flex-wrap: wrap;
    width: 100%;

    &:last-child {
      border-bottom-style: none;
    }

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

    .group__header {
      h3 {
        color:$alerts-header-color;
        font-weight: 300;
        margin: 0;
        text-align: left;
      }
      display: table-caption;
    }


    .alert {
      display: flex;
      align-items: center;
      margin: 5px 0;
      padding: 0;
      text-align: left;
      width: 100%;

      .image {
        padding: 0 0 0 5px;

        svg, img {
          filter: #{"grayscale()"} opacity(70%);
          height: auto;
          max-height: 20px;
          max-width: 20px;
          width: auto;
        }

      }

      &::last-child{
        margin-bottom: 10px;
      }
    }

    .alert__title {
      padding: 0 0 0 5px;

      span {
        overflow: hidden;
        font-size: $level-5;
        line-height: $level-5 + 0.3;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
      }
    }

    .alert__state  {

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

    .alert-state-green{
      .fa:before{
        color: $green;
        content: "\f058";
      }
    }

    .alert-state-yellow {
      .fa:before{
        color: $yellow;
        content: "\f071";
      }
    }

    .alert-state-red{
      .fa:before{
        color: $red;
        content: "\f057";
      }
    }
  }
}

@media all and (min-width: $l) {
  .alerts__content {
    .alert__title {
        font-size: $level-3;
    }
  }
}
