/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2018. All Rights Reserved.
 * Copyright (c) 2020 Red Hat, Inc.
 *
 * Note to U.S. 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: 100ms;

/* *********************  popup filter checkboxes modal ************************ */
.resource-filter-button {
  display: flex;
  position: fixed;
  top: 6.0rem;
  right: 13.5rem;
  z-index: 1004;
}

.resource-filter-view {
  position: fixed;
  top: $secondary-header-top;
  right: 0;
  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;
  top: 4.08rem;

  &.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;

    .titleIcon {
      width: 12px;
      height: 12px;
      fill: $color__white;
      stroke: none;
    }

    .titleText {
      font-size: 1.2rem;
      padding-left: 10px;
    }

    .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;
        font-size: 14px;
        font-weight: 600;
      }

      .filter-section-checkbox {
        font-size: 12px;
      }

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

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