// Copyright (c) Jupyter Development Team.
// Copyright (c) Microsoft Corporation.
// Distributed under the terms of the Modified BSD License.

import { css, ElementStyles } from '@microsoft/fast-element';
import { FoundationElementTemplate } from '@microsoft/fast-foundation';
import {
  accentFillActive,
  accentFillHover,
  accentFillRest,
  accentForegroundActive,
  accentForegroundHover,
  accentForegroundRest,
  bodyFont,
  controlCornerRadius,
  foregroundOnAccentActive,
  foregroundOnAccentHover,
  foregroundOnAccentRest,
  strokeWidth,
  typeRampBaseFontSize
} from '../design-tokens.js';

/**
 * Styles for Disclosure
 * @public
 */
export const disclosureStyles: FoundationElementTemplate<ElementStyles> = (
  context,
  definition
) => css`
  .disclosure {
    transition: height 0.35s;
  }

  .disclosure .invoker::-webkit-details-marker {
    display: none;
  }

  .disclosure .invoker {
    list-style-type: none;
  }

  :host([appearance='accent']) .invoker {
    background: ${accentFillRest};
    color: ${foregroundOnAccentRest};
    font-family: ${bodyFont};
    font-size: ${typeRampBaseFontSize};
    border-radius: calc(${controlCornerRadius} * 1px);
    outline: none;
    cursor: pointer;
    margin: 16px 0;
    padding: 12px;
    max-width: max-content;
  }

  :host([appearance='accent']) .invoker:active {
    background: ${accentFillActive};
    color: ${foregroundOnAccentActive};
  }

  :host([appearance='accent']) .invoker:hover {
    background: ${accentFillHover};
    color: ${foregroundOnAccentHover};
  }

  :host([appearance='lightweight']) .invoker {
    background: transparent;
    color: ${accentForegroundRest};
    border-bottom: calc(${strokeWidth} * 1px) solid ${accentForegroundRest};
    cursor: pointer;
    width: max-content;
    margin: 16px 0;
  }

  :host([appearance='lightweight']) .invoker:active {
    border-bottom-color: ${accentForegroundActive};
  }

  :host([appearance='lightweight']) .invoker:hover {
    border-bottom-color: ${accentForegroundHover};
  }

  .disclosure[open] .invoker ~ * {
    animation: fadeIn 0.5s ease-in-out;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
`;
