import styled from 'styled-components';
import { segmentTokens } from '@salutejs/plasma-new-hope/styled-components';
import { AccordionItem } from '../../Accordion';
import { SegmentItem } from '../../Segment/Segment';
export var ColorTokensWrapper = styled.div.withConfig({
    displayName: "Colors.styles__ColorTokensWrapper",
    componentId: "sc-e9243388-0"
})([
    "padding-top:1.5rem;width:100%;"
]);
export var SubthemeSwitcher = styled.div.withConfig({
    displayName: "Colors.styles__SubthemeSwitcher",
    componentId: "sc-e9243388-1"
})([
    "margin:-0.5rem auto 2.5rem auto;width:fit-content;position:relative;&:before{content:'Подтема';position:absolute;top:50%;transform:translate(-100%,-50%);left:-0.75rem;color:var(--text-tertiary);font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);bold-font-weight:var(--plasma-typo-body-xs-bold-font-weight);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}"
]);
export var StyledSegmentItem = styled(SegmentItem).withConfig({
    displayName: "Colors.styles__StyledSegmentItem",
    componentId: "sc-e9243388-2"
})([
    "",
    ":1.75rem;",
    ":0.375rem 0.5rem;"
], segmentTokens.itemHeight, segmentTokens.itemPilledPadding);
export var AccordionInfo = styled.div.withConfig({
    displayName: "Colors.styles__AccordionInfo",
    componentId: "sc-e9243388-3"
})([
    "display:grid;grid-template-columns:16.75rem 9.938rem 2.375rem 3.813rem 9.313rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"
]);
export var Subcategory = styled.div.withConfig({
    displayName: "Colors.styles__Subcategory",
    componentId: "sc-e9243388-4"
})([
    "color:var(--text-secondary);"
]);
export var ColumnTitle = styled.div.withConfig({
    displayName: "Colors.styles__ColumnTitle",
    componentId: "sc-e9243388-5"
})([
    "color:var(--text-tertiary);transition:opacity 0.2s;&.color{display:flex;align-items:center;gap:2.5rem;}&.hex{padding-left:3.75rem;}"
]);
export var StyledAccordionItem = styled(AccordionItem).withConfig({
    displayName: "Colors.styles__StyledAccordionItem",
    componentId: "sc-e9243388-6"
})([
    "--plasma-accordion-item-padding:0;--plasma-accordion-item-padding-vertical:0;border-bottom:unset;width:50.375rem;div > div > div > svg{color:var(--text-secondary);}.accordion-item-body{margin-bottom:2.375rem;padding-top:0.125rem;transition:margin-bottom 0.2s,padding-top 0.2s;}[aria-expanded]{margin-bottom:1rem;}[aria-expanded='false']{margin-bottom:1.125rem;",
    " ",
    "{opacity:0;}}[aria-expanded='false'] + div > .accordion-item-body{margin:0;padding:0;}"
], AccordionInfo, ColumnTitle);
export var TokenInfoWrapper = styled.div.withConfig({
    displayName: "Colors.styles__TokenInfoWrapper",
    componentId: "sc-e9243388-7"
})([
    "display:flex;flex-direction:column;gap:0.75rem;margin-top:-0.125rem;"
]);
export var ColorTokenDataWrapper = styled.div.withConfig({
    displayName: "Colors.styles__ColorTokenDataWrapper",
    componentId: "sc-e9243388-8"
})([
    "display:flex;flex-direction:column;gap:0.5rem;"
]);
export var StateDataWrapper = styled.div.withConfig({
    displayName: "Colors.styles__StateDataWrapper",
    componentId: "sc-e9243388-9"
})([
    "display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.75rem;"
]);
export var OpacityPart = styled.span.withConfig({
    displayName: "Colors.styles__OpacityPart",
    componentId: "sc-e9243388-10"
})([
    "color:var(--text-secondary);padding-left:0.125rem;"
]);
export var TokenInfo = styled.div.withConfig({
    displayName: "Colors.styles__TokenInfo",
    componentId: "sc-e9243388-11"
})([
    "color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:2.5rem;}&.no-interaction{text-align:right;}&.hex{padding-left:3.75rem;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);",
    "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);",
    "{color:var(--text-secondary-active);}}&.state{padding-left:1.5rem;color:var(--text-secondary);&:hover{color:var(--text-secondary);}&:active{color:var(--text-secondary-active);}}"
], OpacityPart, OpacityPart);
export var ColorCircle = styled.div.withConfig({
    displayName: "Colors.styles__ColorCircle",
    componentId: "sc-e9243388-12"
})([
    "width:1.25rem;height:1.25rem;border-radius:50%;background:",
    ";box-shadow:",
    ";"
], function(props) {
    return props.background || 'transparent';
}, function(props) {
    return props.disableShadow ? 'none' : 'inset 0px 0px 0px 1px rgba(8, 8, 8, 0.12)';
});
