/*
@file This is our file to create the variables that will be used across the theme.
To override these in your sub-theme, just create a new variables.css file and
library, and add that to your theme.info.yml file.
We are adding these to body instead of :root so we can more easily override
them in the future. For example if we create a theme setting to add an inline
style for --color-accent: red;, or if we used JS to add it to the body element.
*/
body {
/* Widths and Spacing */
--width-mega: 90rem; /* 1440px */
--width-extra-large: 73.75rem; /* 1180px */
--width-large: 60rem;
--width-medium: 48rem;
--width-small: 30rem;
--width-container: var(--width-extra-large);
--width-restricted-width-section: var(--width-medium);
--spacing-smallest: calc(var(--spacing) * 0.25);
--spacing-smaller: calc(var(--spacing) * 0.5);
--spacing-small: calc(var(--spacing) * 0.75);
--spacing: 1rem;
--spacing-large: calc(var(--spacing) * 1.5);
--spacing-larger: calc(var(--spacing) * 2);
--spacing-largest: calc(var(--spacing) * 2.5);
--spacing-mega: calc(var(--spacing) * 3);
--spacing-padding-horizontal: var(--spacing);
--line-height: 1.5;
--vertical-rhythm-spacing: calc(var(--line-height) * 1rem);
/* Colours */
/*
Colours Defined
In this section, we define the colours available in our theme.
We should not refer to these directly in our CSS however. Instead,
we use the names at our "Colours Applied" section.
*/
--color-accent: #652c95;
--color-accent-2: #ffe146;
--color-green: #048a04;
--color-red: #e4251b;
--color-orange: #ed7522;
--color-yellow: #fd0;
--color-blue: #297bbb;
/*
Grey Scale
In this section, we define our greys; let's not have 50 shades
*/
--color-white: #fff;
--color-grey-lightest: #f9f9f9;
--color-grey-lighter: #eaeaea;
--color-grey-light: #cecfd0;
--color-grey-medium: #b1b4b6;
--color-grey-dark: #505a5f;
--color-black: #0b0c0c;
/*
Colours Applied
In this section, we "apply" our colours.
*/
--color-info: var(--color-blue);
--color-success: var(--color-green);
--color-danger: var(--color-red);
--color-warning: var(--color-orange);
--color-minor: var(--color-yellow);
--color-link: var(--color-accent);
--color-focus: var(--color-yellow);
/* Fonts */
/*
We choose basic fonts that most people have in browser cache from visiting other websites.
This will help with page speed, rather than calling fonts from Google Fonts or somewhere.
*/
--font-primary: roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--font-secondary: georgia, "Times New Roman", times, serif;
--font-heading-1: var(--font-secondary);
--font-heading-2: var(--font-secondary);
--font-heading-3: var(--font-secondary);
--font-heading-4: var(--font-secondary);
--font-heading-5: var(--font-secondary);
--font-heading-6: var(--font-secondary);
/*
Font sizes based on vertical rhythm of:
- Font size: 16px;
- Scale factor: 1.303
- Details: https://www.gridlover.net/try
*/
--font-size: 1rem;
--font-size-smallest: calc(var(--font-size) * 0.3);
--font-size-smaller: calc(var(--font-size) * 0.5);
--font-size-small: calc(var(--font-size) * 0.75);
--font-size-medium: calc(var(--font-size) * 1);
--font-size-large: calc(var(--font-size) * 1.3125);
--font-size-larger: calc(var(--font-size) * 1.6875);
--font-size-largest: calc(var(--font-size) * 2.875);
--font-size-h1: clamp(var(--font-size-larger), 10vw, var(--font-size-largest));
--font-size-h2: clamp(var(--font-size-large), 8vw, var(--font-size-larger));
--font-size-h3: clamp(var(--font-size-medium), 6vw, var(--font-size-large));
--font-size-h4: var(--font-size-medium);
--font-size-h5: var(--font-size-medium);
--font-size-h6: var(--font-size-medium);
/* Heading colours */
--color-text: var(--color-black);
--heading-1-color: var(--color-text);
--heading-2-color: var(--color-text);
--heading-3-color: var(--color-text);
--heading-4-color: var(--color-text);
--heading-5-color: var(--color-text);
--heading-6-color: var(--color-text);
/* Heading line-height */
--heading-1-line-height: var(--line-height);
--heading-2-line-height: var(--line-height);
--heading-3-line-height: var(--line-height);
--heading-4-line-height: var(--line-height);
--heading-5-line-height: var(--line-height);
--heading-6-line-height: var(--line-height);
/* Heading font-weight */
--heading-font-weight: bold;
--heading-1-font-weight: var(--heading-font-weight);
--heading-2-font-weight: var(--heading-font-weight);
--heading-3-font-weight: var(--heading-font-weight);
--heading-4-font-weight: var(--heading-font-weight);
--heading-5-font-weight: var(--heading-font-weight);
--heading-6-font-weight: var(--heading-font-weight);
/* Borders */
--border-width: 1px;
--border-width-large: 5px;
--border-color: var(--color-grey-light);
--border-color-dark: var(--color-grey-dark);
--border-color-alert: var(--color-black);
--border-style: solid;
--border-radius: var(--spacing-smallest);
--border: var(--border-width) var(--border-style) var(--border-color);
--border-large: var(--border-width-large) var(--border-style) var(--border-color);
--border-dark: var(--border-width) var(--border-style) var(--border-color-dark);
--border-transparent: var(--border-width) var(--border-style) transparent;
/* Animation */
--transition-time: 0.3s;
/* Dialog */
--dialog-backdrop-color: rgba(0, 0, 0, 0.8);
}
/*
Applying Variables
By taking this approach of setting variables above, and then applying them here
to specific items, we can easily override these in sub-themes to change items
one-by-one without the CSS cascade affecting us (unless we want it to - in that case,
override the defined variables above instead).
*/
body {
/* Grid */
--grid-column-spacing: var(--spacing);
/* Breadcrumbs */
--breadcrumbs-background-color: var(--color-white);
--breadcrumbs-border: var(--border);
--breadcrumbs-divider: "»";
--breadcrumbs-font-size: var(--font-size-medium);
--breadcrumbs-padding-vertical: var(--spacing-small);
--breadcrumbs-padding-horizontal: 0;
--breadcrumbs-link-color: var(--color-link);
--breadcrumbs-spacing-bottom: var(--vertical-rhythm-spacing);
/* Header Items */
--section-spacing-vertical-header: var(--spacing);
--color-section-header-bg: var(--color-accent);
--header-link-color: var(--color-white);
--header-services-button-border: var(--border);
--header-services-button-border-color: var(--color-white);
--header-services-button-color: var(--color-white);
--header-services-button-bg-color: transparent;
--header-services-button-bg-color-hover: var(--color-accent);
--header-services-button-color-hover: var(--color-white);
--header-logo-width: 10rem;
--color-slogan: var(--color-white);
--header-search-button-color: var(--color-white);
--header-search-button-bg-color: var(--color-accent);
--header-search-button-color-hover: var(--color-accent);
--header-search-button-bg-color-hover: var(--color-white);
--header-search-input-border: var(--border-transparent);
/* Secondary Menu */
--secondary-menu-bg-color-first: var(--color-accent);
--secondary-menu-bg-color-second: var(--color-white);
--secondary-menu-link-color: var(--color-black);
--secondary-menu-link-color-focus: var(--color-black);
--secondary-menu-column-count: 3;
/* Footer Items */
--color-section-pre-footer-bg: var(--color-grey-dark);
--color-section-footer-bg: var(--color-white);
--color-section-post-footer-bg: var(--color-white);
--section-spacing-vertical-pre-footer: var(--spacing-largest);
--section-spacing-vertical-footer: var(--spacing);
--section-spacing-vertical-post-footer: var(--spacing);
--color-pre-footer-heading: var(--color-white);
--color-pre-footer-link: var(--color-white);
--color-pre-footer-text: var(--color-white);
--color-footer-heading: var(--color-text);
--color-footer-link: var(--color-link);
--color-footer-text: var(--color-text);
--color-post-footer-heading: var(--color-text);
--color-post-footer-link: var(--color-link);
--color-post-footer-text: var(--color-text);
/* Housekeeping Items */
--color-section-housekeeping-bg: var(--color-accent);
--color-housekeeping-heading: var(--color-white);
--color-housekeeping-link: var(--color-white);
--color-housekeeping-text: var(--color-white);
--section-spacing-vertical-housekeeping: var(--spacing);
/* Page Title */
--page-title-border: var(--border);
--page-title-width: var(--width-medium);
--page-title-subtitle-font-size: var(--font-size-h2);
--page-title-lede-font-size: var(--font-size-h3);
/* Form Item Description Items */
--form-item-description-bg-color: var(--color-grey-lightest);
--form-item-description-border: var(--border);
/* Input Elements */
--input-padding-vertical: var(--spacing);
--input-padding-horizontal: var(--spacing);
--input-text-color: var(--color-white);
--input-text-color-hover: var(--color-accent);
--input-icon-color: var(--input-text-color);
--input-icon-color-hover: var(--color-accent);
--input-border-color: var(--color-grey-dark);
--input-border-color-hover: var(--color-grey-dark);
--input-bg-color: var(--color-white);
--input-bg-color-hover: var(--color-grey-light);
--input-border-radius: 0;
--text-input-font-family: var(--font-primary);
/* Checkbox Items */
--checkbox-select-focus-color: var(--color-focus);
--checkbox-select-outline-color: var(--color-black);
/* Radio Items */
--radio-select-focus-color: var(--color-focus);
--radio-select-outline-color: var(--color-black);
/* Button Elements (and button-styled links) */
--button-padding-vertical: var(--spacing);
--button-padding-horizontal: var(--spacing);
--button-text-color: var(--color-white);
--button-text-color-hover: var(--color-accent);
--button-icon-color: var(--button-text-color);
--button-icon-color-hover: var(--color-accent);
--button-border-color: var(--color-accent);
--button-bg-color: var(--color-accent);
--button-bg-color-hover: var(--color-white);
--button-font-family: var(--font-primary);
--button-border-radius: 0;
/* File Upload Items */
--file-upload-border: var(--border);
--file-upload-border-left-size: var(--border-width-large); /* Deprecated */
--file-upload-border-inline-start-size: var(--border-width-large);
--file-upload-border-color: var(--color-accent);
--file-upload-bg-hover-color: var(--color-accent);
--file-upload-text-hover-color: var(--color-white);
/* Fieldset Elements */
--fieldset-border-color: var(--color-grey-medium);
/* Option Elements */
--option-bg-color: var(--color-accent);
--option-color: var(--color-white);
--option-bg-hover-color: var(--color-white);
--option-hover-color: var(--color-accent);
/* Sidebar Items */
--sidebar-exposed-form-bg-color: var(--color-grey-light);
--sidebar-exposed-form-padding-vertical: var(--spacing-larger);
--sidebar-exposed-form-padding-horizontal: var(--spacing-larger);
--sidebar-exposed-form-item-spacing: var(--spacing);
/* Guide Navigation */
--section-spacing-vertical-guide-nav: calc(var(--spacing-large) + 1rem); /* 1rem to account for padding on left of bullets */
--section-spacing-horizontal-guide-nav: var(--spacing-large);
--guide-nav-column-count: 3;
/* IA Block */
--ia-block-bg-color: var(--color-white);
--ia-block-bg-color-promoted: var(--color-white);
/* Link component */
--link-icon-margin: var(--spacing-smaller);
/* Link and summary component */
--link-and-summary-title-icon-margin: var(--spacing-smaller);
/* Featured Subsite */
--featured-subsite-bg-color: var(--color-grey-light);
/* Box Links */
--box-link-border: var(--border-dark);
--box-link-content-spacing: var(--spacing-small);
/* Fact Box */
--fact-box-bg-light: var(--color-grey-light);
--fact-box-bg-dark: var(--color-grey-dark);
--fact-box-bg-accent: var(--color-accent);
--fact-box-padding-vertical: var(--spacing-largest);
--fact-box-padding-horizontal: var(--spacing-large);
--fact-box-title: var(--font-size-large);
--fact-box-fact: var(--font-size-largest);
--fact-box-border: var(--border-large);
--fact-box-border-color: var(--color-grey-medium);
--fact-box-red: red;
--fact-box-blue: blue;
--fact-box-text-color-accent: var(--color-white);
/* Image with Caption */
--image-with-caption-border: var(--border);
--image-with-caption-border-color: var(--color-grey-light);
--image-with-caption-padding: var(--spacing);
--image-with-caption-bg-color: var(--color-grey-light);
/* Quote */
--quote-padding: var(--spacing-larger);
--quote-padding-left: var(--spacing-larger); /* Deprecated */
--quote-padding-inline-start: var(--spacing-larger);
--quote-border: var(--border-large);
--quote-border-color: var(--color-accent);
--quote-bg-color: var(--color-grey-lighter);
--quote-author-color: var(--color-accent);
/* Featured Teasers */
--featured-teaser-border: var(--border);
--featured-teaser-content-padding: var(--spacing);
/* Documents */
--table-border: var(--border);
--table-padding: var(--spacing);
--table-bg-color: var(--color-grey-light);
--table-header-border-color: var(--color-grey-medium);
/* Tabs */
--tabs-border: var(--border);
--tabs-border-color: var(--color-grey-dark);
--tabs-text-color: var(--color-grey-dark);
--tabs-button-bg-color: var(--color-grey-light);
--tabs-button-active-color: var(--color-white);
--tabs-button-font-size: var(--font-size);
--tabs-button-font-family: var(--font-primary);
/* Links styled like buttons */
--button-link-padding: var(--spacing);
--button-link-bg-color: var(--color-accent);
--button-link-color: var(--color-white);
--button-link-bg-color-hover: var(--color-accent);
--button-link-color-hover: var(--color-white);
/* Step-by-Step */
--step-by-step-relationship-border-color: var(--color-accent);
--step-by-step-part-of-color: var(--color-accent);
--step-by-step-active-item-color: var(--color-accent);
--step-by-step-active-bullet-bg-color: var(--color-accent);
--step-by-step-active-bullet-border-color: var(--color-accent);
--step-by-step-line-joining-items-border: var(--border);
--step-by-step-line-joining-items-color: var(--color-accent);
--step-by-step-nav-block-width: var(--width-medium);
/* Call-out Box */
--call-out-box-padding: var(--spacing-large);
--call-out-box-link-padding: var(--spacing-smaller);
--call-out-box-bg-color: var(--color-accent);
--call-out-box-text-color: var(--color-white);
--call-out-box-title-color: var(--call-out-box-text-color);
/* Service Statuses */
--service-statuses-padding: var(--spacing);
--service-statuses-container-bg-color: var(--color-accent);
--service-statuses-container-text-color: var(--color-white);
--service-statuses-list-bg-color: var(--color-white);
--service-statuses-list-spacing: var(--spacing-large);
--service-statuses-list-border: var(--border);
--service-statuses-list-border-color: var(--color-accent);
/* Banner */
--banner-content-width: var(--width-medium);
--banner-content-margin: calc(var(--spacing-largest) * 2);
--banner-content-padding: var(--spacing-largest);
--banner-content-bg-color: var(--color-accent);
--banner-content-text-color: var(--color-white);
--banner-title-size: var(--font-size-larger);
--color-banner-title-link: var(--color-white);
--color-banner-title-link-hover: var(--color-white);
/* Teaser View Mode */
--teaser-image-with: 33%;
--teaser-featured-content-padding: var(--spacing-larger);
--teaser-featured-height: 100%;
--teaser-featured-border: var(--border);
--teaser-featured-border-color: var(--border-color-dark);
/* Card View Mode */
--card-height: var(--teaser-featured-height);
--card-border: var(--teaser-featured-border);
--card-border-color: var(--teaser-featured-border-color);
--card-content-padding: var(--teaser-featured-content-padding);
/* News */
--newsroom-featured-bottom-space: var(--spacing-largest);
--news-category-spacing: var(--spacing);
--newsroom-featured-space-after-items: var(--spacing);
/* Search Results */
--sitewide-search-header-container-padding-horizontal: var(--spacing);
--sitewide-search-header-container-padding-vertical: var(--spacing);
--search-results-item-spacing: var(--spacing-largest);
--search-results-list-item-border: var(--border);
--search-results-list-item-marker-color: transparent;
/* WYSIWYG Styles */
--btn-start-bg-color: var(--color-success);
--btn-start-bg-color-hover: var(--color-white);
--btn-start-color: var(--color-white);
--btn-start-color-hover: var(--color-success);
--btn-start-padding-horizontal: var(--spacing);
--btn-start-padding-vertical: var(--spacing-smaller);
--btn-start-border: var(--border);
--btn-start-border-color-hover: var(--btn-start-bg-color);
--btn-start-icon: "\203A";
--btn-start-icon-size: var(--font-size-largest);
--btn-start-icon-top: -3px;
--external-link-icon-color: var(--color-accent);
--wysiwyg-align-spacing: var(--spacing);
/* Alert Banner */
--alert-banner-bg-color: var(--color-success);
--alert-banner-bg-color-minor: var(--color-minor);
--alert-banner-bg-color-major: var(--color-danger);
--alert-banner-bg-color-notable-person: var(--color-black);
--alert-banner-color: var(--color-white);
--alert-banner-title-color-notable-person: inherit;
--alert-banner-title-color-announcement: inherit;
--alert-banner-title-color-minor: inherit;
--alert-banner-title-color-major: inherit;
--alert-banner-focus-color: var(--color-black);
--alert-banner-minor-color: var(--color-black);
--alert-banner-minor-border-color: var(--color-black);
--alert-banner-close-button-bg-color: var(--color-black);
--alert-banner-close-button-color: var(--color-white);
--alert-banner-close-button-border-color: var(--color-white);
--alert-banner-close-padding-vertical: var(--spacing-smaller);
--alert-banner-close-padding-horizontal: var(--spacing-small);
--alert-banner-color-minor: var(--color-black);
--alert-banner-close-border: var(--border);
--alert-banner-close-border-color: var(--color-white);
--alert-banner-inner-margin-vertical: 0;
--alert-banner-inner-margin-horizontal: 0;
--alert-banner-inner-padding-vertical: var(--spacing);
--alert-banner-inner-padding-horizontal: 0;
/* Leaflet Mapping */
--leaflet-map-outline-stroke-colour: #38f;
/* Blogs */
--blog-author-image-width: calc(var(--teaser-image-with) / 2);
--blog-author-content-margin: var(--spacing-largest);
/* Page Sections */
--color-page-section-background-color: transparent;
--color-page-section-text-color: var(--color-black);
--color-page-section-background-color-1: var(--color-accent);
--color-page-section-background-color-1-text-color: var(--color-white);
--color-page-section-background-color-1-link-color: var(--color-white);
--color-page-section-background-color-2: var(--color-accent-2);
--color-page-section-background-color-2-text-color: var(--color-black);
--color-page-section-background-color-2-link-color: var(--color-black);
--color-page-section-background-color-3: var(--color-grey-lightest);
--color-page-section-background-color-3-text-color: var(--color-black);
--color-page-section-background-color-3-link-color: var(--color-black);
--color-page-section-background-color-4: var(--color-accent);
--color-page-section-background-color-4-text-color: var(--color-white);
--color-page-section-background-color-4-link-color: var(--color-white);
--color-page-section-background-color-5: var(--color-accent);
--color-page-section-background-color-5-text-color: var(--color-white);
--color-page-section-background-color-5-link-color: var(--color-white);
--color-page-section-background-color-6: var(--color-accent);
--color-page-section-background-color-6-text-color: var(--color-white);
--color-page-section-background-color-6-link-color: var(--color-white);
/* Page Sections - Newsroom Teasers */
--color-page-section-background-color-1-newsroom-teaser-background-color: var(--color-white);
--color-page-section-background-color-1-newsroom-teaser-text-color: var(--color-black);
--color-page-section-background-color-1-newsroom-teaser-link-color: var(--color-black);
--color-page-section-background-color-2-newsroom-teaser-background-color: var(--color-white);
--color-page-section-background-color-2-newsroom-teaser-text-color: var(--color-black);
--color-page-section-background-color-2-newsroom-teaser-link-color: var(--color-black);
--color-page-section-background-color-3-newsroom-teaser-background-color: var(--color-black);
--color-page-section-background-color-3-newsroom-teaser-text-color: var(--color-white);
--color-page-section-background-color-3-newsroom-teaser-link-color: var(--color-white);
--color-page-section-background-color-4-newsroom-teaser-background-color: var(--color-white);
--color-page-section-background-color-4-newsroom-teaser-text-color: var(--color-black);
--color-page-section-background-color-4-newsroom-teaser-link-color: var(--color-black);
--color-page-section-background-color-5-newsroom-teaser-background-color: var(--color-white);
--color-page-section-background-color-5-newsroom-teaser-text-color: var(--color-black);
--color-page-section-background-color-5-newsroom-teaser-link-color: var(--color-black);
--color-page-section-background-color-6-newsroom-teaser-background-color: var(--color-white);
--color-page-section-background-color-6-newsroom-teaser-text-color: var(--color-black);
--color-page-section-background-color-6-newsroom-teaser-link-color: var(--color-black);
/* Page Sections - Box Links */
--color-page-section-background-color-1-box-link-border-color: var(--color-white);
--color-page-section-background-color-1-box-link-background-color: var(--color-white);
--color-page-section-background-color-1-box-link-text-color: var(--color-black);
--color-page-section-background-color-1-box-link-link-color: var(--color-black);
--color-page-section-background-color-2-box-link-border-color: var(--color-white);
--color-page-section-background-color-2-box-link-background-color: var(--color-white);
--color-page-section-background-color-2-box-link-text-color: var(--color-black);
--color-page-section-background-color-2-box-link-link-color: var(--color-black);
--color-page-section-background-color-3-box-link-border-color: var(--color-black);
--color-page-section-background-color-3-box-link-background-color: var(--color-black);
--color-page-section-background-color-3-box-link-text-color: var(--color-white);
--color-page-section-background-color-3-box-link-link-color: var(--color-white);
--color-page-section-background-color-4-box-link-border-color: var(--color-white);
--color-page-section-background-color-4-box-link-background-color: var(--color-white);
--color-page-section-background-color-4-box-link-text-color: var(--color-black);
--color-page-section-background-color-4-box-link-link-color: var(--color-black);
--color-page-section-background-color-5-box-link-border-color: var(--color-white);
--color-page-section-background-color-5-box-link-background-color: var(--color-white);
--color-page-section-background-color-5-box-link-text-color: var(--color-black);
--color-page-section-background-color-5-box-link-link-color: var(--color-black);
--color-page-section-background-color-6-box-link-border-color: var(--color-white);
--color-page-section-background-color-6-box-link-background-color: var(--color-white);
--color-page-section-background-color-6-box-link-text-color: var(--color-black);
--color-page-section-background-color-6-box-link-link-color: var(--color-black);
/* Page Sections - Featured Subsites */
--color-page-section-background-color-1-featured-subsite-background-color: var(--color-grey-lightest);
--color-page-section-background-color-1-featured-subsite-text-color: var(--color-black);
--color-page-section-background-color-1-featured-subsite-link-color: var(--color-black);
--color-page-section-background-color-2-featured-subsite-background-color: var(--color-grey-lightest);
--color-page-section-background-color-2-featured-subsite-text-color: var(--color-black);
--color-page-section-background-color-2-featured-subsite-link-color: var(--color-black);
--color-page-section-background-color-3-featured-subsite-background-color: var(--color-black);
--color-page-section-background-color-3-featured-subsite-text-color: var(--color-grey-lightest);
--color-page-section-background-color-3-featured-subsite-link-color: var(--color-grey-lightest);
--color-page-section-background-color-4-featured-subsite-background-color: var(--color-grey-lightest);
--color-page-section-background-color-4-featured-subsite-text-color: var(--color-black);
--color-page-section-background-color-4-featured-subsite-link-color: var(--color-black);
--color-page-section-background-color-5-featured-subsite-background-color: var(--color-grey-lightest);
--color-page-section-background-color-5-featured-subsite-text-color: var(--color-black);
--color-page-section-background-color-5-featured-subsite-link-color: var(--color-black);
--color-page-section-background-color-6-featured-subsite-background-color: var(--color-grey-lightest);
--color-page-section-background-color-6-featured-subsite-text-color: var(--color-black);
--color-page-section-background-color-6-featured-subsite-link-color: var(--color-black);
/* Add to Calendar */
--add-to-calendar-dialog-max-width: 80%;
--add-to-calendar-dialog-max-height: 80%;
--add-to-calendar-dialog-width: 500px;
--add-to-calendar-dialog-height: 500px;
--add-to-calendar-dialog-backdrop-color: var(--color-black);
--add-to-calendar-dialog-backdrop-opacity: 0.75;
--add-to-calendar--icon-color: var(--color-white);
--add-to-calendar--icon-color-hover: var(--color-accent);
/* Accordion */
--accordion-icon-closed: "+";
--accordion-icon-opened: "-";
}