import { getColor } from 'package/helpers';
import styled from 'styled-components';

export const AppContainer = styled('div')`
  width: auto;
  height: 100%;
  position: relative;
  background-color: ${props => getColor(props, 'primary')};
`;

export const DebugButtons = styled('div')`
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: fit-content;
  display: inline-flex;
  gap: 0.5rem;
`;

export const Button = styled('button')`
  min-height: 3rem;
  padding: 0 1rem;
  border-radius: 0.35rem;
  cursor: pointer;
  background-color: ${props => getColor(props, 'accent')};
  color: ${props => getColor(props, 'onAccent')};
  font-weight: bold;
  border: none;

  &:hover {
    background-color: ${props => getColor(props, 'accentHover')};
    color: ${props => getColor(props, 'onAccentHover')};
  }
`;