import styled from "styled-components";
import { default as Button } from "../button";
import { currentTheme } from "../../theme";
export const MenuWrapper = styled.nav(({ placement, axis }) => `
  position: fixed;

  ${placement === "left" ? "left: 0; bottom: 0;" : "right: 0; bottom: 0;"}

  ${axis === "Y" ? "max-height: 100vh;" : "max-width: 100vw;"}

  ${axis === "X" && placement === "left"
    ? "display: flex; flex-direction: row-reverse;"
    : axis === "X" && placement === "right"
        ? "display: flex; flex-direction: row;"
        : ""}


  margin: 10px 20px;

  ${placement === "left" ? "margin-right: 0;" : "margin-left: 0;"}

  border-radius: 8px;

  overflow: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;
  scrollbar-height: none;

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  @media (max-width: 1023px) {
    &.open {
      margin: 0;
      padding: 10px 0 10px 20px;
      background-color: #ffffffe6;
    }
  }

  ul {
    position: relative;
    left: 0px;
    bottom: 0px;

    list-style: none;
    padding: 0;
    margin: 0;

    overflow: scroll;

    -ms-overflow-style: none;

    scrollbar-width: none;
    scrollbar-height: none;

    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    li {
      position: absolute;
      left: 0px;
      bottom: 0px;

      display: flex;
      align-items: center;
      justify-content: center;

      transition: all .2s;
    }
  }
`);
export const ToggleButton = styled(Button) `
  border-radius: 50%;

  &.active {
    background-color: ${currentTheme.button?.disabledBackground};
    border-color: ${currentTheme.button?.disabledBackground};
  }
`;
//# sourceMappingURL=styled.js.map