@use "../utilities/icons";
@use "../utilities/mixins";

/**
 * @file _dropdown.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 29.08.2025
 * @version 2.x.x
 * @brief Styles für die Dropdown Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Dropdown Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 *
 * Dropdown ist noch in der Entwicklungsphase und nicht teil des Desingn System CSS-Framworks!!!
 *
 */

 @use "sass:map";

.kern-dropdown {
  position: relative;

  &[open] {
    .kern-dropdown__header {
      &::before {
        content: "";
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: var(--kern-metric-space-none, 0px);
        left: var(--kern-metric-space-none, 0px);
        cursor: auto;
      } 
    } 
  }

  &__header {
    cursor: pointer;
    list-style-type: none;

    display: inline-flex;
    min-height: var(--kern-metric-dimension-x-large, 48px);
    justify-content: center;
    align-items: center;
    vertical-align: top;
    gap: var(--kern-metric-space-none, 0px);
    border: none;
    border-radius: var(--kern-metric-border-radius-default, 4px);
    @include mixins.body-default;
    padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px);
    color: var(--kern-color-action-default, #1A3DA5);

    &::after {
      content: '';
      width: var(--kern-metric-dimension-default, 24px);
      min-width: var(--kern-metric-dimension-default, 24px);
      height: var(--kern-metric-dimension-default, 24px);
      -webkit-mask: map.get(icons.$icons, "arrow-down");
      mask: map.get(icons.$icons, "arrow-down");
      mask-size: cover;
      mask-repeat: no-repeat;
      background-color: var(--kern-color-action-default, #1A3DA5);
      @include mixins.forced-colors-style;
    }

    &:hover {
      background: var(--kern-color-action-state-indicator-tint-hover-opacity);
      cursor: pointer;
    }

    .kern-label{
      color: var(--kern-color-action-default, #1A3DA5);
      padding: var(--kern-metric-space-small, 8px);
    } 
  }

  &__body{    
    display: flex;
    z-index: 99;
    position: absolute;
    left: 0;
    flex-direction: column;
    border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default, #1A3DA5);
    margin: 2px;
    white-space: nowrap;
    background: var(--kern-color-layout-background-default);
    border-radius: var(--kern-metric-border-radius-default);

    .kern-list {
      padding: 0;
      
      li {
        margin-bottom: var(--kern-metric-space-none, 0px);
        padding: 0.25rem 1rem 0.25rem 0;
        list-style: none;
        position: relative;

        &:hover {
          background: var(--kern-color-action-state-indicator-tint-hover-opacity);
          cursor: pointer;
        } 

        .kern-link {
          text-decoration: none;
        } 

        &:has(input:checked) {
          &:before {
            content: "";
            -webkit-mask: map.get(icons.$icons, "check");
            mask: map.get(icons.$icons, "check");
            background-color: var(--kern-color-action-default, #1A3DA5);
            position: absolute; 
            top: 8px;
            left: 8px;
            width: 24px;
            height: 24px;
            @include mixins.forced-colors-style;
          }  
        } 

        label {
          width: 100%;
          display: block;
          padding-left: 2.5rem;
          color: var(--kern-color-action-default, #1A3DA5);
    
          input {
            all: unset;
          }
        }

      }
    } 
  } 
}