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

$filter_sidebar_width: 300px;
$filter_sidebar_animation_duration: 300ms;

/* *********************  popup filter checkboxes modal ************************ */

.overview-filterview {
  position: fixed;
  top: $secondary-header-top;
  right: 5px;
  z-index: 2000;
  color: $color__white;
  background-color: $color__blue-90;
  width: $filter_sidebar_width;
  padding: 30px;
  border-top: 5px solid $color__blue-50;
  font-size: 14px;

  &.transition-enter {
    right: -$filter_sidebar_width;

    &.transition-enter-active {
      transform: translateX(-100%);
      transition: transform $filter_sidebar_animation_duration $animation__ease-in;
    }
  }

  &.transition-exit.transition-exit-active {
    transform: translateX(100%);
    transition: transform $filter_sidebar_animation_duration $animation__ease-out;
  }

  .filterHeader {
    display: flex;
    align-items: center;

    .titleText {
      font-size: 1.2rem;
    }

    .closeIcon {
      position: absolute;
      top: .75rem;
      right: .75rem;
      fill: $color__white;
      cursor: pointer;
    }
  }

  .filter-sections-container {

    .filter-sections-scrollbar {
      width: 10px;
      visibility: hidden;
    }

    .filter-section {
      margin: 1.5rem 0 5px 5px;

      .filter-section-title {
        margin-bottom: .5rem;
      }

      .filter-section-checkbox {
      }

      .filter-section-expand {
        font-size: 12px;
        color: $color__blue-30;
        cursor: pointer;
        outline: none;
      }
    }
  }

  &:hover {
    .filter-sections-scrollbar {
      visibility: visible;
    }
  }


}
