import { StyleSheet } from 'react-native';
import { COLORS } from '../constants/color';

export const styles = StyleSheet.create({

  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',

    paddingTop: 25,      // space above
    paddingHorizontal: 10,

    marginBottom: 25,
  },

  greeting: {
    color: COLORS.textSecondary,
    fontSize: 16,
    marginBottom: 8,
  },

  locationContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },

  location: {
    color: COLORS.textPrimary,
    fontSize: 26,
    fontWeight: 'bold',
    marginRight: 6,
  },

  notificationBtn: {
    width: 48,
    height: 48,
    borderRadius: 15,
    backgroundColor: COLORS.cardBg,
    justifyContent: 'center',
    alignItems: 'center',
  },

  badge: {
    position: 'absolute',
    top: -3,
    right: -3,

    backgroundColor: COLORS.red,

    borderRadius: 10,

    width: 20,
    height: 20,

    justifyContent: 'center',
    alignItems: 'center',
  },

  badgeText: {
    color: '#fff',
    fontSize: 10,
    fontWeight: 'bold',
  },

});