import styled from 'styled-components';
import {
  rem,
  zIndex
} from '../style/function.style';

export const Container = styled.div<{ type?: number;isEdit?:boolean|undefined }>`
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: ${rem(24)};
  position: relative;
  ${({ type }) => (
    type===8 ? `
    padding: 0 ${rem(23)}; 
    ` : `padding: 0 ${rem(32)}`
  )}
`;

export const Bangs = styled.div`
  height: ${rem(32)};
  border-top-left-radius: ${rem(32)};
  border-top-right-radius: ${rem(32)};
  margin-top: -${rem(31.5)};
  background-color: #fff;
  .nw-dark-mode &{
    background-color: #151515;
  }
`;

export const FlexRowBox = styled.div`
  display: flex;
  flex-direction: row;
`;

export const FlexItem = styled.div<{ flex?: string|number }>`
  flex: ${({ flex }) => (typeof flex === 'number' ? `${flex} ${flex} auto` : flex)};
  overflow: hidden;
`;
FlexItem.defaultProps = {
  flex: '1 1 auto'
}

type Mode = 'light' | 'dark';

export const mode: Mode = (window as any).darkModeInstance ? (window as any).darkModeInstance.mode : 'light';

const skeletonColor = (mode: Mode) => {
  return mode === 'light' ? '#EDEDED' : '#333333'
};

export const skeletonOneLine =`
  color: rgba(0,0,0,0);
  background-image: linear-gradient(
    180deg,
    transparent 15%,
    ${skeletonColor(mode)} 15%,
    ${skeletonColor(mode)} 85%,
    transparent 85%
  );
`;

export const skeletonImage = `
  background-color: ${skeletonColor(mode)};
`;

export const skeletonTwoLine = `
  color: rgba(0,0,0,0);
  background-image: linear-gradient(
    180deg,
    transparent 9%,
    ${skeletonColor(mode)} 9%,
    ${skeletonColor(mode)} 41%,
    transparent 41%,
    transparent 59%,
    ${skeletonColor(mode)} 59%,
    ${skeletonColor(mode)} 91%,
    transparent 91%
  );
`;

export const PostErrorTip = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #FF5280;
  padding: ${rem(4)} ${rem(8)};
  color: #FF5280;
  z-index: 4;
  background: rgba(255, 255, 255, 0.4);
`;