/**
 * 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';

/**
 * InlineEdit CSS
 */
export const styles = css`
  :host {
    box-sizing: border-box;
    -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));
  }

  .inline__edit--label {
    color: var(--nile-inline-edit-label-font-color, var(--ng-colors-text-primary-900));
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    font-style: normal;
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
  }

  .inline__edit--open--container {
    display: block;
    width: var(--nile-width-width-xxs, var(--ng-spacing-80));
    box-sizing: border-box;
  }

  .inline__edit--container {
    box-sizing: border-box;
    width: var(--nile-width-width-xxs, var(--ng-width-80));
    min-width: var(--nile-width-width-xxs, var(--ng-width-80));
    min-height: var(--nile-height-40px, var(--ng-height-40px));
    height: auto;
    padding-top: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
    padding-bottom: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
    padding-left: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
    padding-right:var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));
    color: var(--nile-inline-edit-font-color, var(--ng-colors-text-quaternary-500));
    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
    font-style: normal;
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    line-height: var(--nile-spacing-spacing-3xl, var(--ng-line-height-text-md));
    word-wrap: break-word;
    width: 100%;
  }

  .inline__edit--container:hover {
    background-color: var(--nile-inline-edit-hover-background-color, var(--ng-colors-bg-secondary-hover));
  }

  :host([disabled]) .inline__edit--container,
  :host([disabled]) .inline__edit--container:hover {
  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
  color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
  cursor: not-allowed;
  user-select: none;
}

`;

export default [styles];