import styled, { css } from "styled-components";
import { addFocus } from "../../../../../mixins";
import { classes, tokens } from "../../../tokens";
export const base = css([
    `position:relative;display:flex;flex-direction:column;gap:0.125rem;align-items:center;`
]);
export const StyledContent = styled.div.withConfig({
    displayName: "VerticalTabs.styles__StyledContent",
    componentId: "sc-b42f65d2-0"
})([
    `display:inline-flex;flex-direction:column;align-items:flex-start;`
]);
export const StyledContentWrapper = styled.div.withConfig({
    displayName: "VerticalTabs.styles__StyledContentWrapper",
    componentId: "sc-b42f65d2-1"
})([
    `box-sizing:border-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.`,
    `{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}`,
    `{margin-top:auto;}}&.`,
    `{overflow:visible;}`
], classes.tabsClipScroll, StyledContent, classes.tabsClipShowAll);
export const StyledArrow = styled.button.withConfig({
    displayName: "VerticalTabs.styles__StyledArrow",
    componentId: "sc-b42f65d2-2"
})([
    `display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;transform:rotate(90deg);`,
    `;&[disabled]{cursor:not-allowed;}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)'
}), tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive);
