export const container = `absolute top-2.5 left-2 flex gap-x-3 z-10`;
export const item = `
  group rounded-full h-10 min-w-10 max-w-10 w-10 px-3 whitespace-nowrap text-base-white
  flex gap-0 items-center justify-center font-medium overflow-hidden -outline-offset-2
  shadow-4sm

  transition-none

  bg-[var(--background)]
  hover:bg-[var(--fill)]
  data-[is-active=true]:bg-[var(--fill)]
  data-[is-active=true]:max-w-full
  data-[is-active=true]:w-full
  data-[is-active=true]:gap-2
  data-[is-active=true]:transition-all
`;
export const icon = `
  transition-colors w-5 h-5 flex-shrink-0

  fill-[var(--fill)]
  group-hover:fill-base-white
  group-data-[is-active=true]:fill-base-white
`;
export const title = `
  text-sm
  transition-all max-w-0 translate-x-16

  group-data-[is-active=true]:max-w-none
  group-data-[is-active=true]:translate-x-0
`;
//# sourceMappingURL=styles.js.map