import * as CSS from 'csstype'

export type RatingScaleType = {
  ratingScaleWrapper: CSS.Properties
  ratingScale: CSS.Properties
  ratingButton: CSS.Properties
  ratingButtonSelected: CSS.Properties
  ratingButtonActive: CSS.Properties
  ratingGradationInfoWrapper: CSS.Properties
  info: CSS.Properties
}

export const RatingScaleStyles: RatingScaleType = {
  ratingScaleWrapper: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  ratingScale: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  },
  ratingButton: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    background: '#F6F6F6',
    padding: '16px',
    width: '62px',
    height: '56px',
    border: 'none',
    borderRadius: '8px',
    cursor: 'pointer',
  },
  ratingButtonSelected: {
    background: '#4B46EC',
    color: '#F6F6F6',
  },
  ratingButtonActive: {
    boxShadow: 'rgb(145 156 248 / 50%) 0px 0px 0px 0.2rem',
  },
  ratingGradationInfoWrapper: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: '18px',
    width: '100%',
    margin: '8px 0',
  },
  info: { margin: 'unset' },
}
