/**
 * Copyright Aquera Inc 2023
 *
 * 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';

/**
 * FormGroup CSS
 */
export const styles = css`
  :host {
    --min-width: 288px;
    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
  }

  .form__base {
    display: flex;
    flex-direction: column;
    min-width: var(--min-width);
    width: max-content;
    box-shadow: var(--nile-box-shadow-11, var(--ng-shadow-xs-skeuomorphic));
    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
    border-radius: var(--nile-radius-base-standard, var(--ng-radius-xl));
    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
  }

  .form__header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nile-spacing-1-x, var(--ng-spacing-xl));
    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
  }

  .form__divider {
    width: 100%;
  }

  .form__divider::part(divider) {
    width: 100%;
    height: 1px;
    margin-top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
    margin-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
  }

  .form__title-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nile-spacing-1-x, var(--ng-spacing-xxs));
    justify-content:center;
  }

  .form__title {
    display: block;
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-lg));
    font-style: normal;
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-lg));
    letter-spacing: 0.2px;
  }

  .form__subtitle {
    display: block;
    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
    font-style: normal;
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm));
    letter-spacing: 0.2px;
  }

  .form__body {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--nile-spacing-3-x, var(--ng-spacing-3xl));
  }
`;
export default [styles];