@value (
  colorBorderPrimary,
  colorBackgroundTertiary,
  colorTextSecondary
) from '../../styles/variables/_color.css';
@value (
  sizeFluid, 
  size58
) from '../../styles/variables/_size.css';
@value (
  spaceNone,
  spaceSmall, 
  spaceMedium,
  spaceXSmall,
  spaceXXSmall
) from '../../styles/variables/_space.css';
@value (
  elevationCard
) from '../../styles/variables/_elevation.css';
@value (
  borderWidthNone,
  borderWidthPrimary,
  borderRadiusSmall,
  borderRadiusMedium,
  borderRadiusNone,
  borderWidthTertiary
) from '../../styles/variables/_border.css';

.wrapper {
  composes: borderPrimary from '../../styles/border.module.css';
  display: flex;
  flex-flow: column;
  width: sizeFluid;
}

.headerWrapper {
  composes: subTitleSmall from '../../styles/typography.module.css';
  display: flex;
  min-height: size58;
  cursor: pointer;
  align-items: center;
  width: sizeFluid;
  justify-content: space-between;
  gap: spaceXSmall;
  padding-left: spaceMedium;
  padding-right: spaceMedium;
  padding-top: spaceSmall;
  padding-bottom: spaceSmall;
  background-color: colorBackgroundTertiary;
  z-index: elevationCard;
  color: colorTextSecondary;
}

.icon {
  padding-right: spaceMedium;
}

.header {
  display: flex;
  align-items: center;
  gap: spaceXSmall;
}

.content {
  composes: borderTopPrimary from '../../styles/border.module.css';
  display: flex;
  flex-flow: column;
  background-color: colorBackgroundTertiary;
  padding: spaceSmall;
  gap: spaceXXSmall;
}