import { StyleProviderFunction } from '@rax-ui/styles';

const stylesProvider: StyleProviderFunction = (theme: any) => {
  const core = theme.Core;
  return {
    'action-sheet': {
      paddingBottom: core['s-4'],
      paddingLeft: core['s-2'],
      paddingRight: core['s-2'],
      backgroundColor: core['color-transparent'],
    },
    'action-sheet__fullwidth': {
      paddingLeft: 0,
      paddingRight: 0,
    },
    'action-sheet__fullwidth_drawer': {
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
    },
    'action-sheet__body': {
      display: 'flex',
      flexDirection: 'column',
      borderRadius: core['corner-3'],
      overflow: 'hidden',
      backgroundColor: core['color-fill1-2'],
    },
    'action-sheet__body__fullwidth': {
      borderRadius: core['corner-zero'],
    },
    'action-sheet__footer': {
      marginTop: core['s-2'],
      borderRadius: core['corner-3'],
      overflow: 'hidden',
      backgroundColor: core['color-fill1-2'],
    },
    'action-sheet__footer__fullwidth': {
      borderRadius: core['corner-zero'],
    },
    'action-sheet__title': {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      boxSizing: 'border-box',
      paddingTop: core['s-4'],
      paddingBottom: core['s-4'],
      paddingLeft: core['s-3'],
      paddingRight: core['s-3'],
      borderBottomWidth: core['line-1'],
      borderBottomColor: core['color-line1-1'],
      borderBottomStyle: core['line-solid'],
    },
    'action-sheet__title__text': {
      lineHeight: core['s-5'],
      fontSize: core['font-size-subhead'],
      color: core['color-text1-2'],
      wordBreak: 'break-all',
      textAlign: 'center',
    },
    'action-sheet__button': {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      height: core['s-14'],
      borderTopWidth: core['line-1'],
      borderTopColor: core['color-line1-1'],
      borderTopStyle: core['line-solid'],
      boxSizing: 'border-box',
      paddingLeft: core['s-3'],
      paddingRight: core['s-3'],
      userSelect: 'none',
    },
    'action-sheet__button--active': {
      backgroundColor: 'rgba(0, 0, 0, 0.1)',
    },
    'action-sheet__button--first': {
      borderTopWidth: 0,
    },
    'action-sheet__button__text': {
      lineHeight: core['s-6'],
      fontSize: core['s-5'],
      color: core['color-brand1-6'],
    },
    'action-sheet__gallery': {
      paddingLeft: core['s-4'],
      paddingRight: core['s-4'],
      paddingTop: core['s-5'],
      paddingBottom: core['s-5'],
      borderBottomWidth: core['line-1'],
      borderBottomColor: core['color-line1-1'],
      borderBottomStyle: core['line-solid'],
    },
    'action-sheet__gallery__container': {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
      flexWrap: 'nowrap',
    },
    'action-sheet__gallery__item': {
      width: core['s-15'],
      minWidth: core['s-15'],
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'flex-start',
      marginRight: core['s-4'],
    },
    'action-sheet__gallery__item-cell': {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: core['s-15'],
      height: core['s-15'],
      borderRadius: core['corner-3'],
      backgroundColor: core['color-white'],
    },
    'action-sheet__gallery__item-icon': {
      fontSize: core['icon-xl'],
      color: core['color-text1-3'],
    },
    'action-sheet__gallery__item-text': {
      fontSize: core['font-size-caption'],
      color: core['color-text1-3'],
      marginTop: core['s-1'],
    },
  };
};

export default stylesProvider;