import styled from 'styled-components';
import { bgColors } from '../../colors';

export const SettingsBox = styled.div`
  width: 150px;
  position: relative;
`;

export const ResolutionButtons = styled.div`
  border: 1px solid rgb(228, 230, 239);
  border-radius: 3px;
`;

export const ResolutionSingleButton = styled.button<{active: boolean}>`
  display: block;
  border: none;
  background: ${props => props.active ? bgColors.main : 'transparent' };
  ${props => props.active && 'color: #FFF;' }
  text-align: center;
  padding: 5px;
  width: 100%;
  &:first-child {
    border-bottom: 1px solid rgb(228, 230, 239);
  }
`;

export const SettingRow = styled.div`
  margin-top: 5px;
  margin-bottom: 5px;
`;

export const SettingText = styled.span`
  font-size: 13px;
`;

export const SettingLabel = styled.label`
  width: 100%; 
  display: flex;
  justify-content: space-between;
`;

export const CloseButton = styled.button`
  background: #FFF;
  border: 1px solid ${bgColors.red};
  width: 100%;
  position: relative;
  left: -2px;
  border-radius: 3px;
  border-radius-top-left: 0px;
  border-radius-bottom-left: 0px;
  border-left: none;
  z-index: 1;
`;

export const VersionText = styled.div`
  font-size: 11px;
  text-align: center;
  font-weight: bold;
  position: absolute;
  bottom: 2px;
  width: 100%;
`;