import styled from "styled-components";
import { currentTheme } from "../../../../theme";
const tabsTheme = currentTheme.dex?.tabs;
export const Tabs = styled.div(({ width }) => `
    display: flex;
    justify-content: space-between;
    width: ${width};
    height: ${tabsTheme?.rowHeight};
    box-shadow: ${tabsTheme?.rowBoxShadow};
    border-radius: ${tabsTheme?.rowBorderRadius};
    background: ${tabsTheme?.rowBackground};
    padding: ${tabsTheme?.rowPadding};
    box-sizing: border-box;
  `);
export const Tab = styled.div(({ css }) => `
    width: 100%;
    height: 100%;
    padding: ${tabsTheme?.padding};
    background: ${tabsTheme?.idleBackground};
    box-shadow: ${tabsTheme?.boxShadow};
    border-radius: ${tabsTheme?.borderRadius};
    cursor: pointer;
    box-sizing: border-box;

    &.ui-nav-tabs__tab--active {
      background: ${tabsTheme?.activeBackground};
    }

    ${css}
  `);
//# sourceMappingURL=index.js.map