import { style } from '@vanilla-extract/css';
import { color } from 'folds';

export const WindowControls = style({
  display: 'flex',
  alignItems: 'center',
  height: '100%',
  paddingRight: '8px',
  gap: '8px',
  flexShrink: 0,
});

export const WindowButton = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: '46px',
  height: '32px',
  border: 'none',
  background: 'transparent',
  color: color.Surface.OnContainer,
  cursor: 'pointer',
  transition: 'background-color 0.1s ease',
  outline: 'none',
  
  ':hover': {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
  },
  
  ':active': {
    backgroundColor: 'rgba(255, 255, 255, 0.05)',
  },
});

export const WindowButtonClose = style([WindowButton, {
  ':hover': {
    backgroundColor: '#e81123',
    color: '#ffffff',
  },
  
  ':active': {
    backgroundColor: '#c50f1f',
    color: '#ffffff',
  },
}]);
