/**
* Copyright Aquera Inc 2025
*
* This source code is licensed under the BSD-3-Clause license found in the
* LICENSE file in the root directory of this source tree.
*/

import { css } from 'lit';

/**
 * OptionHeader CSS
 */
export const styles = css`
	.option-group-header {
		height: var(--nile-height-40px, var(--ng-spacing-10));
		display: flex;
		align-items: center;
		padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-xl));
		background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));
		color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
		font-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));
		font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.content-container {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.gap-18px {
		gap: var(--nile-spacing-14px, var(--ng-spacing-3-5));
	}

	.option-group-prefix,
  .option-group-suffix {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }

  .option-group-prefix::slotted(*) {
    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
  }

  .option-group-suffix::slotted(*) {
    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
  }

  :host(.nile-group-hidden)::part(option-group-header) {
	display: none !important;
  }

.option-group-header {
  z-index: 2;
}
:host([sticky]) .option-group-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary));
}
:host([sticky][search-enabled]) .option-group-header {
  top: 46px;
}

`;

export default [styles];