/*
 * 
 *   Copyright 2016 RIFT.IO Inc
 *
 *   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.
 *
 */
@import "style/_colors.scss";

.recordNavigator{
  .catalogItems {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    flex-direction:row;
    font-family: Roboto, Helvetica, Arial, sans-serif;

    &.-is-scaled {
      margin: 0.25rem 0;
      background: $gray;
      border-radius: 8px;
      padding: 0 0 0.25rem 0;
      color: $black !important;
      &_title {
        padding: 0.5rem;
        &:hover {
          font-style: normal;
        }
      }
    }

    &_item {
      flex: 1 1 100%;
      // background-color:$darker-gray;
      background-color: #fff;
      margin: 0.3rem 1rem;
      // flex: 0 1 49%;
      position: relative;
      height: 4pc;
      overflow: hidden;
      border-radius: 8px;
      padding:0.5rem;
      color: #d9d9d9;
      font-weight: 100;
      font-style: normal;
      -webkit-user-select: none;
      display:flex;
      cursor:pointer;

      h1 {
        font-size: 1.125rem;
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &:hover{
          background-color: #7e9bc1;
          cursor: pointer;
          color: white;
          h2 {
              color: #000;
          }
          abbr, span {
            color: white;
          }
        }

      >div {
        display:flex;
        flex-direction:column;
      }
      &.-is-selected {
        outline: 2px dashed $brand-blue;
        outline-offset: 2px;

        background-color: #7e9bc1;
        cursor: pointer;
        color: white;
        span, abbr {
          color:white;
        }
      }
      img {
        width: 50px;
        height: 50px;
        align-self: center;
      }
      section {
        padding-left:0.5rem;
        display:flex;
        flex-direction:column;
        flex: 1 1 95%;
        justify-content: center;
        padding: 0.125rem 0.75rem;
        abbr {
          font-weight:bold;
        }
        abbr,span {
              display: block;
      color: $gray-dark;
      border: 0;
      // color: #ef8354;
      font-family: monospace,serif;
      font-size: .7rem;
      white-space: nowrap;
        }
      }
      section, h2 {
        margin: 0 0 4px;
        font-weight: normal;
        font-size: .8125rem;
        color:black;
        white-space: nowrap;
      }
    }
  }

}