/*******************************************************************************
 * 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';

$overview-view-width: 1540px !default;
$overview-heat-collapsed: 90px !default;

.overview-page {
  position: relative;
  display: flex;
  flex-direction: column;

  .overview-header {
    top: $secondary-header-top;
    left: 0;
    min-height: 70px;
    position: fixed;
    background-color: white;
    width: 100%;
    z-index: 1000;

    &.bottom-border {
      box-shadow: 0 3px 8px 0 rgba(0,0,0,0.05);
    }

    .overview-header-title {
      font-size: 1.75rem;
      font-weight: 300;
      color: #5a6872;
      margin: 30px 0 45px 4%;
    }

  }

  .overview-providers {
    background-color: white;
    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.05);
    margin-bottom: 46px;

    .provider-view {
      display: flex;
      width: $overview-view-width;
      margin: 0 auto;
      &.banner-open {
        margin-left: 30px;
      }
    }
  }

  /* counter act default padding of page */
  .overview-view {
    position: relative;
    visibility: hidden;

    &.laidout {
      visibility: visible;
    }
  }
}

.drag-place-holder {
  border: 3px dashed $color__navy-gray-7;
  background-color:  $color__white;

  > div {
    visibility: hidden;
  }
}

/* *********************  filter close button ************************ */
.filter-bar, .provider-banner {
 .bx--tag.bx--tag--custom {
    margin-left: 10px;
    background-color: $mcm_view_filter;
    color: $color__blue-90;
    font-size: 1rem;
    padding: .8rem;
    line-height: 20px;
    white-space: nowrap;

    .closeIcon {
      fill: $color__blue-90;
      cursor: pointer;
    }
 }
}

.masonry-container {
  width: $overview-view-width;
  margin: 10px auto 0;
}

/* *********************  base card ************************ */

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.grid-item {
  margin-bottom: $overview-card-margin-bottom;
  background-color: $color__white;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
  position: relative;

  .grid-menu {
    position: absolute;
    top: -6px;
    right: 6px;
    visibility: hidden;
    z-index: 1002;
    .bx--overflow-menu__icon {
      transform: rotate(90deg);
    }

    .bx--overflow-menu:focus {
      outline: none;
      box-shadow: none;
    }
  }

  &:hover .grid-menu {
    visibility: visible;
  }

  &.replaced {
    animation: appear 400ms  ease-in-out;
  }

  .masonry-class.dragging &:hover .grid-menu {
    visibility: hidden;
  }

  .grid-view {
    .title {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dfe3e6;
      font-size: 12px;
      font-weight: bold;
      letter-spacing: 0;
      color: $color__blue-90;
      padding: 11px 24px;
      cursor: move;

      .bx--tag {
        margin-left: 10px;
      }
    }
  }
}

.bx--overflow-menu--flip {
  outline: none;
}

.bx--overflow-menu-options__option:hover .bx--overflow-menu-options__btn {
  color: $color__blue-90;
}

.bx--overflow-menu-options__option.bx--overflow-menu-options__option--danger:hover  .bx--overflow-menu-options__btn {
  color: $color__white;
}

.bx--overflow-menu-options:focus {
  outline: none;
  box-shadow: none;
}

