/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2018, 2019. All Rights Reserved.
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure 
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 *******************************************************************************/
@import 'node_modules/carbon-components/scss/globals/scss/_colors';
@import 'variables';

.search--input-area {
  .bx--search--light {
    display: inline-block;
    width: calc(100% - 3rem);
  }
}

.search-input-save-button {
  transform: scale(0.9);
  float: right;
  display: inline-block;
  height: 2.5rem;
  width: 2.5rem;
  margin: -0.14rem 0 0 -0.51rem;
  background: $color__gray-3;
  &:hover {
    button svg {
      fill: $color__white;
    }
    background: $color__blue-51;
  }
  button svg {
    fill: $color__blue-51;
  }
  .query-save-button {
    position: relative;
    height: 2.5rem;
    width: 2.5rem;
    border: none;
    background-color: transparent;
    &:hover {
      cursor: pointer;
    }
  }
}

.save-and-edit-query-modal {
  .bx--modal-content{
    overflow: visible;
  }

  .bx--form-item {
    display: inline-block;
    width: 100%;
    &:nth-last-of-type(2){
      padding-bottom:2.375rem;
    }
  }
}

.search-guide-modal {
  .bx--modal-container {
    padding: 0rem;

    .bx--modal-header {
      margin-bottom: 0rem;
    }

    .bx--modal-content{
      overflow-x: hidden;
      margin-bottom: 0rem;
      p {
        font-size: .9rem;
      }

      &-header {
        display: flex;
        justify-content: space-between;
        padding: .5rem 2rem;
        background-color: $color__gray-3;

        &-content {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        &-main {
          font-size: 1.5rem;
          font-weight: 700;
          padding-bottom: 1rem;
        }
        &-subtext {
          font-size: .8rem;
          color: $color__navy-gray-6;
        }
      }

      &-body {
        padding: 1.5rem 2rem 1.5rem 2rem;
        border-top: 1px solid $color__gray-1;

        &-row {
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 1rem 1rem 0rem 0rem;
        }
        .bx--list--unordered {
          margin-left: 0;
          .bx--list__item {
            font-weight: normal;
          }
        }
      }

      &-footer {
        display: flex;
        justify-content: flex-end;
        padding: 1.5rem 3rem;
        background-color: $color__gray-2;
      }

      .body-pill {
        width: 4.5rem;

        &-label {
          display: flex;
          justify-content: center;
          width: 3.5rem;
          padding: .1rem .5rem;
          margin-right: .5rem;
          background: $color__blue-51 right 8px center no-repeat;
          border-radius: 1.5rem;
          color: $color__white;
        }
      }
    }
  }
}

.saved-search-queries {
  .saved-search-query-show-button {
    display: block;
    text-align: center;
    button {
      border: none;
      background-color: transparent;
      &:hover {
        cursor:pointer;
        p {
          color: $color__blue-60;
        }
      }
    }
    p {
      color: $color__blue-51;
      font-weight: bold;
      font-size: 0.8rem;
      display: inline;
    }
    svg {
      align-self: center;
      margin-left: 1rem;
      color: $color__blue-51;
    }
  }
  .saved-search-query-header {
    margin-right: 1rem;
    font-weight: bold;
    font-size: 0.9rem;
    display: inline-block;
    &-count {
      font-size: 0.85rem;
      color: $color__navy-gray-6;
      display: inline-block;
      margin-left: -0.5rem;
    }
  }
  .query-cards-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem 1.6rem -1rem;
  }
  .bx--module__inner {
    box-shadow: none;
    .bx--module__content{
      flex-direction: unset;
      padding: 0;
    }
  }
}

.search-query-card {
  display: flex;
  justify-content: center;
  &:hover {
    border: 1px solid $color__navy-gray-7;
    transition: .25s cubic-bezier(.5,0,.1,1);
  }

  &.bx--tile {
    min-height: 8rem;
    margin: 1rem;
    min-width: 26rem;
  }

  &:hover .query-menu-button{
    visibility: visible;
  }
  &:focus-within .query-menu-button{
    visibility: visible;
  }
  .search-query-card-summary {
    display: flex;
    .search-query-result {
      text-align: center;
      flex: 1 0 30%;
      padding: 0.8rem;
      border-right: 1px $color__navy-gray-8 solid;
      margin-left: -1rem;
      &:hover {
        cursor: pointer;
        .search-query-result-string {
          color: $color__blue-51;
        }
      }
      .search-query-result-number {
        font-family: 'Red Hat Text Regular';
        font-style: normal;
        font-weight: 300;
        color: $mcm_search_icp_bright_blue;
        font-size: 2rem;
        &__suggested {
          font-family: 'Red Hat Text Regular';
          font-style: normal;
          font-weight: 300;
          color: $mcm_search_suggested;
          font-size: 2rem;
        }
      }
      .search-query-result-string {
        color: $color__navy-gray-6;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 1.03px;
        font-weight: bold;
      }
      &::after{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }
    }
    .search-query-content {
      display: flex;
      flex-direction: column;
      flex: 1 0 70%;
      margin-left: 0.8rem;
      .search-query-name {
        text-transform: capitalize;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .search-query-time {
        font-size: 0.7rem;
        color: $color__navy-gray-7;
      }
      .search-query-description {
        height: 100%;
        font-size: 0.75rem;
        color: $color__navy-gray-6;
        font-style: italic;
        &__orb {
          border-top: 1px solid $color__navy-gray-8;
          padding-top: 0.5rem;
        }
        &:hover {
          overflow: visible;
          max-height: 4.8rem;
        }
      }
    }
  }
}

.header-icon--add {
  fill: $color__navy-gray-6;
  &__tab {
    position: relative;
    right: 6rem;
    fill: $color__blue-51;
  }
}

.search-query-updated-time {
  font-size: 0.85rem;
  color: $color__navy-gray-6;
  display: inline;
  margin-left: 1rem;
}

.search-query-card-loading {
  width: 25rem;
  height: 4.5rem;
  padding: 1rem;
}

.query-menu-button {
  height: 2rem;
  color: $color__navy-gray-6;
  background-color: transparent;
  visibility: hidden;
  margin: -0.8rem 0 0 -0.5rem;
}

.content-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.save-query-box {
  .bx--form-item .bx--text-input {
    &:hover {
      border: 1px solid $color__navy-gray-7;
    }
    color: $ibm-colors__black;
    background: $color__white;
    border: 1px solid $color__navy-gray-7;
    padding: 1.5rem;
    margin-top: 1rem;
  }
}

.secondary-header-tabs {
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    max-width: 11.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &.bx--tabs__nav-item--selected{
      width: 100%;
      cursor: default;
      &.single-tab{
        width:unset;
        a {
          max-width: 100%;
        }
      }
      &:last-child{
        width: auto;
      }
      a {
        cursor:default;
        max-width: 90%;
        overflow: hidden;
      }
    }
    a {
      font-size: 0.9rem;
      flex: 1;
      overflow:hidden;
    }
  }

  .header-icon--close{
    cursor:pointer;
    margin: 0.1rem 0 0 0.5rem;
    fill: $color__navy-gray-6;
    transform: scale(0.9);
  }

  .header-tab-add-new {
    margin-left: 1.8rem;
    overflow: unset;
    &:hover{
      width: auto;
    }
    &.inactive{
      cursor:default;
      margin: 1rem 0 0 0;
      font-size: 0.9rem;
      color: $color__gray-1;
    }
  }

  .header-tab-separator-container{
    padding: 0;
    margin: 1rem -2rem 0 2rem;
    .header-tab-separator {
      height: 1rem;
      border-left: 1px solid $color__navy-gray-8;
    }
  }

  .header-tab-divider {
    position: relative;
    margin: 1rem;
    height: 1rem;
    top: 0.7rem;
    border-left: 1px solid $color__navy-gray-8;
  }

}




.header-tab-container {
  &:hover .header-icon--close{
    visibility: visible;
    display: inline;
  }
  outline: 1px solid transparent;
}

.search-query-card-inner-container {
  height: 100%;

  .search-query-header{
    &__orb {
      margin: -2rem 0 0 3rem;
    }
  }
  .search-query-orb {
    width: 2rem;
    height: 2rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    background-image: linear-gradient(to bottom left,$mcm_search_suggested, $color__teal-20);

    svg {
      margin: 0.5rem 0.65rem;
      fill: $color__white;
    }
  }
}

.save-modal-description{
  margin-bottom: 2rem;
}

@media (min-width:1441px){
    .query-cards-container {
      .search-query-card {
        max-width: calc(33.33% - 2rem);
        min-width: 24rem;
      }
    }
}

@media (max-width:1440px){
    .query-cards-container {
      .search-query-card {
        max-width: calc(50% - 2rem);
      }
    }
}

@media (max-width: 850px) {
  .query-cards-container {
    justify-content: space-around;
    .search-query-card {
      max-width: 100%;
    }
  }
}

@media (max-width: 768px) {
  .secondary-header.apollo header .bx--detail-page-header-title{
    margin-top: 0;
  }
  .secondary-header-wrapper {
    height: 0;
  }
}
