import styled from "styled-components";
/**
 * Элемент пагинации точками.
 * Стилизованный компонент, обладающий всеми свойствами ``div``.
 */ export const DotBase = styled.li.withConfig({
    displayName: "PaginationDot__DotBase",
    componentId: "sc-6fe9db1f-0"
})([
    `width:`,
    `;height:0.375rem;border-radius:1rem;background:`,
    `;transition:width 0.1s ease-in-out,background 0.3s ease-in-out;font-size:0.5rem;& + &{margin-left:0.375rem;}&:focus{outline:0 none;}`
], ({ isActive })=>isActive ? '1.75rem' : '0.375rem', ({ isActive })=>isActive ? 'var(--text-primary)' : 'var(--surface-transparent-tertiary)');
/**
 * Элемент пагинации точками.
 * Стилизованный компонент, обладающий всеми свойствами ``div``.
 * @deprecated
 */ export const PaginationDot = styled(DotBase).withConfig({
    displayName: "PaginationDot",
    componentId: "sc-6fe9db1f-1"
})([
    `cursor:pointer;background:`,
    `;&:hover{background:var(--text-accent);}`
], ({ isActive })=>isActive ? 'var(--text-accent)' : 'var(--surface-transparent-tertiary)');
