import styled from "styled-components";
import { addFocus } from "../../../../mixins";
import { tokens } from "../../Slider.tokens";
export var ThumbBase = styled.div.withConfig({
    displayName: "Thumb.styles__ThumbBase",
    componentId: "sc-385321bd-0"
})([
    "width:var(--plasma-private-thumb-size);height:var(--plasma-private-thumb-size);min-width:var(--plasma-private-thumb-size);min-height:var(--plasma-private-thumb-size);position:relative;border-radius:50%;box-sizing:border-box;background:var(",
    ");margin:0.0625rem;transition:border-color 0.1s ease-in-out;&:after{background:var(",
    ");margin:-0.0625rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}&:not([disabled]):hover:after,&:not([disabled]):active:after{background:var(",
    ");}&[disabled]{cursor:not-allowed;}&:focus{outline:none;}",
    ""
], tokens.thumbBackgroundColor, tokens.thumbBorderColor, tokens.thumbFocusBorderColor, addFocus({
    outlineOffset: '0.0625rem',
    outlineSize: '0.125rem',
    outlineRadius: '50%',
    outlineColor: "var(".concat(tokens.thumbFocusBorderColor, ")")
}));
