@use '../../../theme.data.scss' as data;

$blocks: (
  header: bottom,
  content: none,
  footer: top,
);
$border: 2px solid var(--chat-border-color);
$padding: 0px;

@each $blockName, $pos in $blocks {
  .dropdown-panel-widget-#{$blockName} {
    padding: $padding;

    @if $blockName == none {
      overflow: auto;
    } @else {
      border-#{$pos}: $border;

      &:empty {
        padding: 0;
        border-width: 0;
      }
    }
  }
}

.dropdown-panel-widget {
  display: block;

  width: 100%;

  background-color: data.$backgroundColor;
  border-radius: data.$borderRadius;
  box-shadow: data.$blockShadow;

  &:focus,
  &:active {
    outline: none;
  }
}