import styled from "styled-components/native";
import { StyleSheet } from "react-native";

export const Styles = StyleSheet.create({
  barUpperTransition: {
    transform: [
      {
        rotate: "-45deg",
      },
      {
        translateX: 2,
      },
      {
        translateY: -1,
      },
    ],
  },
  hide: {
    display: "none",
  },
  barDownTransition: {
    transform: [
      {
        rotate: "45deg",
      },
      {
        translateX: -5,
      },
      {
        translateY: -6,
      },
    ],
  },
  anchorMenu: {
    marginTop: 25,
    marginBottom: 25,
    marginLeft: 25,
    /* svg: {
      marginRight: 18,
    }, */
  },
  overlayShow: {
    display: "flex",
    width: 160,
  },
  atomLogoShow: {
    display: "flex",
    marginTop: "-30px",
    marginLeft: "30px",
    float: "right",
    position: "relative",
  },
});

export const Bar = styled.View`
  width: 24.75px;
  height: 3px;
  background-color: #333;
  margin: 0 0 3px 0;
  transition: 0.4s;
`;
export const HamburguerContainer = styled.TouchableOpacity`
  display: flex;
`;

export const OverlayMenuContainer = styled.View``;
