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