import { style } from '@vanilla-extract/css';
import { color, config, DefaultReset, FocusOutline, toRem } from 'folds';

// Dawn settings rail — uppercase tracked muted labels, raised active row with a
// violet accent tick, and an eyebrow over the entity name. Shared by room and
// space settings.

const MUTED = 'rgba(230, 230, 233, 0.45)';

export const NavEyebrow = style([
  DefaultReset,
  {
    display: 'block',
    textTransform: 'uppercase',
    letterSpacing: '0.1em',
    fontSize: toRem(10),
    lineHeight: toRem(14),
    fontWeight: config.fontWeight.W600,
    color: MUTED,
  },
]);

export const NavSection = style([
  DefaultReset,
  {
    display: 'block',
    textTransform: 'uppercase',
    letterSpacing: '0.08em',
    fontSize: toRem(11),
    lineHeight: toRem(16),
    fontWeight: config.fontWeight.W600,
    color: MUTED,
    padding: `${config.space.S400} ${config.space.S300} ${config.space.S200}`,
  },
]);

export const NavItem = style([
  DefaultReset,
  FocusOutline,
  {
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    gap: config.space.S300,
    width: '100%',
    padding: `${config.space.S300} ${config.space.S300}`,
    marginBottom: toRem(2),
    borderRadius: config.radii.R400,
    color: color.Surface.OnContainer,
    cursor: 'pointer',
    selectors: {
      '&:hover': { backgroundColor: color.Background.ContainerHover },
      '&[aria-pressed=true]': { backgroundColor: color.Background.ContainerActive },
      '&[aria-pressed=true]::before': {
        content: '""',
        position: 'absolute',
        left: toRem(5),
        top: '50%',
        transform: 'translateY(-50%)',
        width: toRem(3),
        height: '52%',
        borderRadius: toRem(3),
        backgroundColor: color.Primary.Main,
      },
    },
  },
]);

export const NavItemIcon = style({
  opacity: 0.6,
  selectors: {
    [`${NavItem}[aria-pressed=true] &`]: {
      color: color.Primary.Main,
      opacity: 1,
    },
  },
});

export const NavItemLabel = style({
  fontWeight: config.fontWeight.W500,
  selectors: {
    [`${NavItem}[aria-pressed=true] &`]: {
      fontWeight: config.fontWeight.W600,
    },
  },
});
