/*
 * Copyright (C) 2017-2019 Dremio Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
:global {
  // DX-11429 TODO reafactor component to use css modules instead fo global classes

  .wrapper-dropdown {
    /* Size & position */
    vertical-align: top;
    position: relative;
    width: auto;
    padding: 8px 15px;
    display: inline-block;
    margin: 5px;

    /* Styles */
    background: var(--fill--secondary);
    border-radius: 3px;

    cursor: pointer;
    border: 1px solid var(--border--neutral);
    outline: none;
    transition: all 0.3s ease-out;

    &::after {
      /* Little arrow */
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      top: 50%;
      right: 10px;
      margin-right: 5px;
      margin-top: -5px;
      border: solid currentColor;
      border-width: 0 0.1em 0.1em 0;
      display: inline-block;
      padding: 0.2em;
      transform: rotate(45deg);
    }
    .dropdown-text {
      padding: 10px 15px 0px 5px;
      position: relative;
      left: -10px;
    }

    .dropdown {
      /* Size & position */
      position: absolute;
      margin-left: -1px;
      margin-right: -1px;

      top: 100%;
      width: auto;
      left: 0;
      right: 0;
      margin-top: 0;
      padding-left: 0px;

      /* Styles */
      background-color: var(--fill--secondary);
      border-radius: 0 0 3px 3px;
      border: 1px solid var(--border--neutral);
      border-top: none;
      border-bottom: none;
      list-style: none;
      transition: all 0.3s ease-out;

      /* Hiding */
      max-height: 0;
      overflow: hidden;

      li {
        display: block;
        text-decoration: none;
        color: var(--text--primary);
        padding: 10px 16px;
        transition: all 0.3s ease-out;
        border-bottom: 1px solid var(--border--neutral);

        &:last-of-type {
          border: none;
        }

        &:hover {
          background-color: rgba(0, 0, 0, 0.05);
        }
      }
    }

    /* Active state */

    &.active {
      border-radius: 3px 3px 0 0;
      box-shadow: none;
      border-bottom: none;

      .dropdown {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        z-index: 999999;
        max-height: 400px;
        overflow-y: scroll;
      }
    }
  }
}
