import styled, { css } from "styled-components";
import { addFocus } from "../../../../../mixins";
import { classes, tokens } from "../../../tokens";
export const base = css([
    `display:flex;gap:0.125rem;align-items:center;position:relative;`
]);
export const StyledContent = styled.div.withConfig({
    displayName: "HorizontalTabs.styles__StyledContent",
    componentId: "sc-4eb753d2-0"
})([
    `display:inline-flex;flex-direction:row;align-items:center;`
]);
export const StyledContentWrapper = styled.div.withConfig({
    displayName: "HorizontalTabs.styles__StyledContentWrapper",
    componentId: "sc-4eb753d2-1"
})([
    `box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.`,
    `{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.`,
    `{overflow:visible;}`
], classes.tabsClipScroll, classes.tabsClipShowAll);
export const StyledArrow = styled.button.withConfig({
    displayName: "HorizontalTabs.styles__StyledArrow",
    componentId: "sc-4eb753d2-2"
})([
    `display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;`,
    `;&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:`,
    `;padding-right:`,
    `;padding-left:`,
    `;color:var(`,
    `);&:hover{color:var(`,
    `);}&:active{color:var(`,
    `);}`
], addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0',
    outlineColor: `var(${tokens.outlineFocusColor})`,
    outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
}), ({ isFilled })=>isFilled ? `var(${tokens.arrowOuterPadding})` : '', ({ isLeftArrow })=>isLeftArrow ? `var(${tokens.arrowInnerPadding})` : 'var(--plasma_private-outer-padding)', ({ isLeftArrow })=>isLeftArrow ? 'var(--plasma_private-outer-padding)' : `var(${tokens.arrowInnerPadding})`, tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive);
