/**
@license
Copyright (c) 2025 trading_peter
This program is available under Apache License Version 2.0
*/

import { LitElement, html, css } from 'lit';

class TpSettingsGridLine extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: contents;
          align-items: center;
        }

        :host([labelTop]) .label {
          align-self: flex-start;
        }

        .control {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 10px;
          justify-self: var(--tp-settings-grid-control-align, flex-start);
        }
      `
    ];
  }

  render() {
    const { } = this;

    return html`
      <div class="label" part="label">
        <slot name="label"></slot>
      </div>
      <div class="control" part="control">
        <slot name="control"></slot>
      </div>
    `;
  }

  static get properties() {
    return {
      labelTop: { type: Boolean, reflect: true }
    };
  }


}

window.customElements.define('tp-settings-grid-line', TpSettingsGridLine);