@import 'utilities';
@import 'streamlit-component-map';

// Loop over the component map
@each $component, $component-elements in $element-container-components {
  $filtered-child-elements: map-remove($component-elements, '_parent', '_direct_child');

  // Loop over all significant child elements and extend with any defined placeholders
  @each $child-element-name, $child-element-selector in $filtered-child-elements {
    $parent: $default-parent;
    $direct-child: $default-direct-child;
    @if map_has-key($component-elements, '_parent') {
      $parent: map-get($component-elements, '_parent')
    }
    @if map_has-key($component-elements, '_direct-child') {
      $direct-child: map-get($component-elements, '_direct-child')
    }

    // The placeholders are the %sal-[name] values set in the main.scss file
    $placeholder-name: #{$component}-#{$child-element-name};

    @if $child-element-name == 'default' {
      // Leave out the '-default' suffix
      $placeholder-name: $component
    }

    // Define the element container selector
    #{streamlit_element_container_selector($component, $child-element-selector, null, 'span', $parent, $direct-child)} {
      // Optionally extend with a placeholder value, this block will not compile if the placeholder is not set/empty
      @extend %#{$placeholder-name} !optional;
    }

    // Add styles for custom component classes
    @if $custom-classes and map_has-key($custom-classes, $placeholder-name) {
      @each $custom-class in map-get($custom-classes, $placeholder-name) {
        #{streamlit_element_container_selector($component, $child-element-selector, $custom-class, 'span', $parent, $direct-child)} {
          @extend %#{$custom-class};
        }
      }
    }
  }
}


// Special element section. These lie outside the normal app view and can only be customized app-wide

// Note: Changing the popover dialog style will affect all instances of it
div[data-testid="stPopoverBody"] {
  @extend %sal-popover-dialog !optional;
}

// Note: Changing the logo can affect st.sidebar
img[data-testid="stLogo"] {
  @extend %sal-logo !optional;
}

// Note: Changing the toast style will affect all instances of it
div[data-testid="stToast"] {
  @extend %sal-toast !optional;
}

div.stApp > header {
  @extend %streamlit-app-header !optional;
}

section.main > div.block-container {
  @extend %streamlit-app-view-block !optional;
}