// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/typography.scss" as *;

// TODO: this must be a custom property in the design system
:global(.light) {
  --low-emphasis-background: #fafafa;
}

:global(.default) {
  --low-emphasis-background: #121214;
}

.style-box {
  --title-gap: var(--sp-xs);
  --title-padding: var(--sp-s);
  --title-color: var(--color-foreground-primary);
  --arrow-color: var(--color-foreground-secondary);
  --box-border-color: var(--color-background-primary);

  padding-block: var(--sp-s);
  padding-inline: var(--sp-m);
  background-color: var(--low-emphasis-background);
  border-block-end: 2px solid var(--box-border-color);
}

.disclosure-header {
  display: flex;
  align-items: center;
  gap: var(--title-gap);
}

.disclosure-button {
  display: grid;
  place-items: center;
  color: var(--arrow-color);
  appearance: none;
  background: none;
  padding: 0;
  margin: 0;
  border: none;
}

.panel-title {
  @include use-typography("headline-small");

  flex: 1;
  color: var(--title-color);
  padding-block: var(--title-padding);
}