// Copyright (c) RoochNetwork
// SPDX-License-Identifier: Apache-2.0

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

import { themeVars } from '../../themes/themeContract.js'

export const overlay = style({
  backgroundColor: themeVars.backgroundColors.modalOverlay,
  backdropFilter: themeVars.blurs.modalOverlay,
  position: 'fixed',
  inset: 0,
  zIndex: 999999999,
})

export const title = style({
  paddingLeft: 8,
})

export const content = style({
  backgroundColor: themeVars.backgroundColors.modalPrimary,
  borderRadius: themeVars.radii.xlarge,
  color: themeVars.colors.body,
  position: 'fixed',
  bottom: 16,
  left: 16,
  right: 16,
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  overflow: 'hidden',
  minHeight: '50vh',
  maxHeight: '85vh',
  maxWidth: 700,
  '@media': {
    'screen and (min-width: 768px)': {
      flexDirection: 'row',
      width: '100%',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
    },
  },
})

export const whatIsASessionButton = style({
  backgroundColor: themeVars.backgroundColors.modalSecondary,
  padding: 16,
  '@media': {
    'screen and (min-width: 768px)': {
      display: 'none',
    },
  },
})

export const viewContainer = style({
  display: 'none',
  padding: 20,
  flexGrow: 1,
  '@media': {
    'screen and (min-width: 768px)': {
      display: 'flex',
    },
  },
})

export const selectedViewContainer = style({
  display: 'flex',
})

export const backButtonContainer = style({
  position: 'absolute',
  top: 20,
  left: 20,
  '@media': {
    'screen and (min-width: 768px)': {
      display: 'none',
    },
  },
})

export const closeButtonContainer = style({
  position: 'absolute',
  top: 16,
  right: 16,
})

export const sessionListContent = style({
  display: 'flex',
  flexDirection: 'column',
  flexGrow: 1,
  gap: 24,
  padding: 20,
  backgroundColor: themeVars.backgroundColors.modalPrimary,
  '@media': {
    'screen and (min-width: 768px)': {
      backgroundColor: themeVars.backgroundColors.modalSecondary,
    },
  },
})

export const sessionListContainer = style({
  display: 'flex',
  justifyContent: 'space-between',
  flexDirection: 'column',
  flexGrow: 1,
  '@media': {
    'screen and (min-width: 768px)': {
      flexDirection: 'row',
      flexBasis: 240,
      flexGrow: 0,
      flexShrink: 0,
    },
  },
})

export const sessionListContainerWithViewSelected = style({
  display: 'none',
  '@media': {
    'screen and (min-width: 768px)': {
      display: 'flex',
    },
  },
})