/*
 * This file is part of TREB.
 *
 * TREB is free software: you can redistribute it and/or modify it under the 
 * terms of the GNU General Public License as published by the Free Software 
 * Foundation, either version 3 of the License, or (at your option) any 
 * later version.
 *
 * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
 * details.
 *
 * You should have received a copy of the GNU General Public License along 
 * with TREB. If not, see <https://www.gnu.org/licenses/>. 
 *
 * Copyright 2022-2026 trebco, llc. 
 * info@treb.app
 * 
 */

@use 'z-index.scss' as *;
@use 'defaults.scss' as *;
 
.treb-main.treb-main {

  .treb-dropdown-caret {

    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    
    background: var(--treb-dropdown-caret-background, #fff);
    border: 1px solid var(--treb-dropdown-caret-border-color, #ccc);
    border-radius: 2px;

    box-shadow: $default-box-shadow;
    z-index: $z-index-dropdown-caret;

    & path {
      fill: none;
      stroke: var(--treb-dropdown-caret-color, #444);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }

  }

  .treb-dropdown-list {

    position: absolute;
    display: none;
    box-shadow: $default-box-shadow;
    z-index: $z-index-dropdown-caret;
    background: var(--treb-dropdown-background, #fff);
    font-size: 10pt;
    color: var(--treb-dropdown-color, inherit);
    border: 1px solid var(--treb-dropdown-border-color, unset);

    text-align: left;
    max-height: 10em;
    overflow-y: auto;
    outline: none;

    & div {
      padding: 2px;
      cursor: default;
    }  

    & div.selected {
      background: var(--treb-dropdown-selected-background, #555);
      color: var(--treb-dropdown-selected-color, #fff);
    }

  }

  .treb-dropdown-caret.active {
    background: var(--treb-dropdown-caret-active-background, #eee);

    & + .treb-dropdown-list {
      display: block;
    }

  }

  /**
   * FIXME: this should move, it's used in dropdowns but it 
   * is more general (should be used for all errors)
   */
  .treb-error-highlight {
    transition: opacity 0.15s ease-in-out;
    background: rgba(255, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: $z-index-error-highlight;

  }

}