import styled from '@emotion/styled';

import { shouldNotForwardProps } from '../../utils/should-not-forward-props';
import { Button } from '../Button';

export const OptionButtonsWrapperBox = styled('div')`
  display: flex;
  flex-direction: column;
  width: 100%;
`;

export const OptionButtonsBox = styled('div')`
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
`;

export const OptionButton = styled(Button, shouldNotForwardProps(['isActive']))<{
  isActive: boolean;
}>`
  padding: 10.5px 16px;
  z-index: ${({ isActive }) => (isActive ? '1' : '0')};
  flex: 1;
`;