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

$filter_sidebar_width: 18.75rem;
$filter_sidebar_animation_duration: 300ms;

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

.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: 1.875rem;
  border-top: 0.3125rem solid $color__blue-50;
  font-size: 0.875rem;

  &.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: 0.75rem;
      height: 0.75rem;
      fill: $color__white;
      stroke: none;
    }

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

    .closeIcon {
      font-family: RedHatText;
      position: absolute;
      top: .75rem;
      right: .75rem;
      fill: $color__white;
      cursor: pointer;

      &:focus {
        box-shadow: 0 0 0 $grc_focus_shaldow_width $grc_focus_shaldow_color;
        outline: 0.0625rem solid transparent;
        border: none;
      }
    }
  }

  .filter-sections-container {

    .filter-sections-scrollbar {
      width: 0.625rem;
      visibility: hidden;
    }

    .filter-section {
      margin: 1.5rem 0 0.3125rem 0.3125rem;

      .filter-section-title {
        margin-bottom: .5rem;
        font-size: 0.875rem;
        font-weight: 600;
      }

      .filter-section-checkbox {
        font-size: 0.75rem;
      }

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

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