import styled from 'styled-components';
import { Layout as AntLayout, Button, Menu } from 'antd';
import { BasicProps } from 'antd/lib/layout/layout';

const { Header: AntHeader } = AntLayout;

const colors = ["#1890FF", "#9C7AFF", "#F15A5A", "#FAAD14", "#23CBB7"];

interface ApplicationItemCloudStyleProps {
  index: number;
}

export const LayoutStyle = styled(AntLayout as any)`
  padding: 12px;
  position: relative;
  max-width: 100%;
  min-height: 100vh;
  padding: 0;
  width: 100%;
  padding-top: 64px;
  background: #F7FAFC;
`;

export const HeaderStyle: React.FC<BasicProps> = styled(AntHeader)`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  position: relative;
  position: fixed;
  z-index: 1;
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  top: 0;
`;

export const HeaderRightStyle = styled.div`
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
`;

export const HeaderMenuStyle = styled(Menu)`
  border: 0;
  flex: 1;
`;

export const HeaderMenuItemStyle = styled(Menu.Item)`
  position: relative;
  .close, .lock{
    opacity: 0;
  }
  &:hover{
    .close, .lock{
      opacity: 1;
    }
  }
  
`;

export const HeaderMenuTitleStyle = styled.div`
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  span{
    padding-left: 4px;
  }
`;

export const HeaderMenuCloseStyle = styled.div`
  position: absolute;
  top: 0;
  right: -15px;
  z-index: 2;
  width: 20px;
  height: 20px;
  overflow: hidden;
  line-height: 20px;
`;

export const HeaderMenuLockStyle = styled.div`
  width: 20px;
  height: 20px;
  overflow: hidden;
  line-height: 20px;
`;

export const LogoStyle = styled.div`
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 96px;
  }
`;

export const LoadingStyle = styled.div`
  position: fixed;
  top: 64px;
  left: 0;
  height: 3px;
  width: 100%;
  overflow-x:hidden;
  background: gray;
  &:before {
    animation:left-to-right 0.5s alternate infinite linear;
    background-image:linear-gradient(to right, #1890FF, #9C7AFF, #F15A5A, #FAAD14, #23CBB7);
    content:"";
    height:100%;
    left:-100%;
    overflow:hidden;
    position:absolute;
    top:0;
    width: 300%;
  }

  @keyframes left-to-right {
    0% {
      transform:translateX(0%);
    }
    100% {
      transform:translateX(-30%);
    }
  }
`;


