import styled from '@emotion/styled';

export const Subsection = styled.div<{ noPadding?: boolean }>`
  border-radius: 16px;
  background-color: var(--color-background-glass-thin);
  padding: ${({ noPadding }) => (noPadding ? '0' : '16px')};
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  color: white;
  ${({ noPadding }) => !noPadding && '& & { padding: 8px; }'}
`;

export const Padding = styled.div<{
  zero?: boolean;
  border?: boolean;
}>`
  padding: 0;
  padding-bottom: ${({ zero }) => (zero ? 0 : '16px')};
  height: 100%;
  width: 300px;
  position: relative;
  .fixed-footer {
    bottom: ${({ zero, border }) => {
      const base = zero ? 0 : 16;
      const borderOffset = border ? 1 : 0;
      return base + borderOffset + 'px';
    }};
    left: ${({ border }) => (border ? 1 : 0)}px;
    right: ${({ border }) => (border ? 1 : 0)}px;
  }
`;

export const Wrapper = styled.div<{
  border?: boolean;
  studioRounding?: boolean;
  hasFooter?: boolean;
}>`
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--color-background-primary);
  border-radius: ${({ studioRounding }) => (studioRounding ? '24px' : '16px')};
  box-shadow: ${({ border }) =>
    border ? '0 0 20px 10px rgba(0, 0, 0, 0.16)' : 'none'};
  border: ${({ border }) =>
    border ? '1px solid var(--color-border-primary)' : 'none'};
  overflow: auto;
  padding-bottom: ${({ hasFooter }) => (hasFooter ? '80px' : '0')};
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
`;