/**
 * 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';
import { utilityControlStyles } from '../internal/app-shell-utility-control-styles';

/** AppShellNavToggle CSS: the host box, the rule, and the utility-control recipe, since this element also mounts outside a shell. */
export const styles = css`
  :host {
    display: inline-flex;
    align-items: center;
    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
  }

  :host([hidden]) {
    display: none;
  }

  /* Lands the 20px glyph box, not the 32px utility circle, on the 24px origin: (32 - 20) / 2 = 6. */
  .toggle {
    margin-inline-start: var(--nile-app-shell-nav-toggle-offset, -6px);
  }

  /* The toggle itself: the shared utility-control recipe. */
  ${utilityControlStyles}

  .rule {
    flex: 0 0 auto;
    width: var(--nile-border-width-1, var(--ng-border-width-1));
    height: 24px;
    background: var(
      --nile-colors-neutral-400,
      var(--ng-colors-border-secondary)
    );
  }

  :host(:not([with-rule])) .rule {
    display: none;
  }
`;

export default [styles];